Autofill and fill Handle in jquery grid

PQGrid provides a powerful autofill feature that allows users to quickly fill data across multiple cells by dragging the fill handle, similar to Excel. What makes PQGrid’s autofill more than just a simple copy-paste is its ability to preserve cell styling, attributes, formats, and even images along with the data values.

Key Points:

1. Basic Autofill
   • Users can click the small fill handle at the bottom-right corner of a selected cell or range.
   • Dragging the handle across rows or columns will automatically populate the target cells with either repeated values or incremented sequences (for numeric/date values).
2. Preserving Styles
   • Cell background colors, text color, font styles, and other CSS styling applied to the source cells are automatically applied to the destination cells.
   • This ensures a visually consistent grid, even when filling large ranges.
3. Maintaining Formats
   • Number, date, and currency formatting applied via PQGrid’s formatter property are preserved.
   • For example, if a cell shows 1,000 with thousand separators, autofilling it into other cells will maintain the same display format rather than raw numeric values.
4. Autofilling Images
   • If a cell contains an image element (e.g., product thumbnails, icons, or logos rendered via RichObj, autofill will replicate the image into the target cells.
   • This is especially useful in product catalogs, dashboards, or grids where visual elements are part of the data.
5. Advanced Usage
   • Autofill can also work with spreadsheet formulas defined in cells.
   • PQGrid automatically adjusts relative references in formulas when copying across multiple cells, ensuring correct computation in each autofilled cell.

option:autofill

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.

option:fillHandle

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.

event:beforeFillHandle

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.