demo D94
Bulk edits
Writing a value across a range, and what one undo then means
edit.setCells()
The configuration
import * as ng from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';
const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });
const 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 },
];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template:
'<div style="display:flex;gap:8px;margin-bottom:8px">' +
' <button (click)="fillDown()">Fill down</button>' +
' <button (click)="fillSeries()">Fill a series</button>' +
' <button (click)="setStage()">Set block to "done"</button>' +
'</div>' +
'<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
@ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;
grid = {
rowKey: 'id',
selection: { mode: 'multiple', ranges: true, fillHandle: true },
edit: true,
toolPanel: { side: 'left', panels: ['columns'], actions: ['undo', 'redo'], exportName: 'work-orders' },
columns,
rows: [/* work orders */],
};
// Every bulk gesture is one undoable step: fill a block and press undo once to
// put the whole block back, not the last cell. These reach the live grid and
// act on the selected block.
fillDown() { this.gridRef.grid.edit.fill(); }
fillSeries() { this.gridRef.grid.edit.fill({ series: true }); }
setStage() { this.gridRef.grid.edit.bulkSet('done'); }
}
bootstrapApplication(AppComponent);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.