jQuery Grid (pqGrid) supports autofill feature similar to Excel.

It can be customized by the options autofill, fillHandle and 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 skipped, cells lying in initial selection are simply repeated in the final selection.

fillHandle: This option is used to display a small square at right bottom corner of a selected range of cells which when dragged horizontally or vertically to extend selection, repeats or autofills the contents of the cells lying in initial selection to the cells in 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.

beforeFillHandle: Triggered before a fillHandle is about to be displayed at bottom right corner of a range selection. It can be cancelled by returning false. The coordinates of the cell i.e., rowIndx, rowIndxPage, rowData, column, colIndx, dataIndx are passed through ui argument to this event. This event can be used to customize autofill and fillHandle options for particular cells, columns and rows.