Autofill and fill Handle in jquery grid

jQuery Grid (pqGrid) offers a convenient autofill feature that is similar to Excel's. This feature allows users to fill cells with a specific value or a series of values by dragging the fill handle across the cells. The autofill feature can be customized using various options such as autofill, fillHandle, and the event beforeFillHandle.


When this option is true, grid figures out the pattern or series for numbers, dates and Excel formulas.

  1. When only one cell with Excel formula is initially selected, row or column parts in the formula are auto-incremented depending upon vertical or horizontal drag respectively.
  2. When 2 cells are initially selected, it figures out the linear equation to fill the rest of the series for numbers and dates.
  3. When 3 cells are initially selected, it figures out the quadratic equation to fill the rest of the series for numbers.
  4. Autofill pattern can be skipped by pressing Ctrl/Cmd key (new in v5.2.0).

When this option is false or is undefined, cells lying in initial selection are simply repeated in the final selection.


The fillHandle option in jQuery Grid enables a user to display a small square at the bottom right corner of a selected range of cells. This square can be dragged horizontally or vertically to extend the selection, repeating or autofilling the contents of the cells in the initial selection to the cells in the final selection.

This option can be set either during initialization or during run time.

This example shows to modify fillHandle option during run time by using dropdown in toolbar.


The beforeFillHandle event in jQuery Grid is triggered just before the fillHandle is displayed at the bottom right corner of a range selection. By accessing the ui argument, which includes rowIndx, rowIndxPage, rowData, column, colIndx, and dataIndx, you can customize the autofill and fillHandle options for specific cells, columns, and rows. This event can be cancelled by returning false, preventing the fillHandle from being displayed.