demo D94
Bulk edits in Angular
Writing a value across a range, and what one undo then means
edit.setCells()
This grid writes one value, or one computed result, across every cell in a selected range in a single operation that a single undo reverses. It turns a repetitive correction into one action, so fixing a field across many rows is quick and reversible.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
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, {
providers: [provideLattice({ createGrid })],
});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.