demo D85
The fill handle
Dragging a corner to extend a series it recognises
fillHandle · detectSeries()
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: { mode: 'multiple', ranges: true, fillHandle: true },
edit: true,
columns: [
{ field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
{ field: 'reference', title: 'Reference', layout: { width: 130 } },
{ field: 'due', title: 'Due', type: 'date', layout: { width: 140 }, edit: true },
{ field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 }, edit: true },
{ field: 'impact', title: 'Impact', type: 'number', layout: { width: 100 }, edit: true },
{ field: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
format: { style: 'currency', currency: 'GBP' }, total: 'sum', edit: true },
],
rows, // work orders
});
</script>Extending a series by dragging the fill handle
The fill handle is the small grip at the corner of a selected cell or range that, when dragged, extends the selection and populates the cells it crosses. A developer reaches for it wherever a spreadsheet-trained user expects to drag a date down a column and get the next few days, drag a “1” and a “2” and get “3, 4, 5”, or drag a single value across a row to repeat it. Lattice Grid exposes this through the fillHandle option, paired with detectSeries() for the logic that inspects the source cells and works out whether the drag should repeat a constant, continue an arithmetic step, or advance a recognised date sequence. Because a JavaScript data grid handling this at scale cannot afford to recompute the whole visible range on every pointer move, the fill preview only touches the cells between the anchor and the current pointer position, and the write itself is a single batched update applied once the drag ends rather than one mutation per cell crossed. The result integrates with the grid’s existing range selection, so a filled range is immediately addressable for copy, further fill, or a subsequent formula reference, with no separate “fill mode” state to fall in or out of.
How do I let users drag-fill a series in a data grid, like Excel?
Enable fillHandle on the grid and use detectSeries() to decide how a drag should extend the source cells: as a repeated constant, an arithmetic sequence, or a date series. Lattice Grid renders the drag handle on the active selection’s corner, previews the affected cells as the pointer moves, and commits the filled values as one update when the drag is released.