demo D94
Bulk edits
Writing a value across a range, and what one undo then means
edit.setCells()
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,
toolPanel: { side: 'left', panels: ['columns'], actions: ['undo', 'redo'], exportName: 'work-orders' },
columns: [
{ field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
{ field: 'reference', title: 'Reference', layout: { width: 130 } },
{ field: 'stage', title: 'Stage', filter: { type: 'set' }, 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: 'effort', title: 'Effort', 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>Writing one value across a selected range
A bulk edit applies a single value, or a single computed result, to every cell in a selected range in one operation, rather than requiring a user to edit each cell in turn. A developer reaches for this wherever a workflow involves correcting a shared field across many rows at once: setting a status column to “approved” for a filtered set of orders, clearing a batch of stale comments, or overwriting a price across a selected block. Lattice Grid exposes this through edit.setCells(), which takes the target range and the value to apply, validates each affected cell against its column’s rules before committing, and writes the result as one transaction. That matters for undo: a bulk edit across a thousand cells reverses with a single Ctrl+Z, because the history stack records the operation as one entry rather than one per cell touched. For a JavaScript data grid handling large ranges, the write itself is batched rather than issued cell by cell, so applying a value across several thousand rows does not trigger a re-render per cell; the grid recomputes the affected region once and repaints it in a single pass. Screen reader users editing via keyboard get a single change announcement for the operation, matching the single undo step rather than a flood of per-cell updates.
How do I set the same value across a range of cells in a data grid?
Select the range and call edit.setCells() with the value to apply. Lattice Grid validates each cell against its column’s rules, applies the write as one batched update, and records the whole range change as a single entry in the undo history, so the operation reverses in one step regardless of how many cells it touched.