demo D90
Row editing
Editing a whole row as one transaction
edit: { mode: 'row' }
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: 'multiple',
edit: { enabled: true, mode: 'row' },
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 180 } },
{ field: 'region', title: 'Region', edit: true },
{ field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
{ field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
{ field: 'charge', title: 'Monthly charge', type: 'number',
format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
],
rows, // circuit records
});
</script>Committing a whole row as one transaction
Row editing changes the unit of commit from the cell to the record. Instead of every keystroke or Tab press writing a value the instant it is confirmed, the row opens once, every editable cell in it goes live together, and nothing reaches the underlying data until the row is committed or cancelled. A developer reaches for this wherever a record only makes sense as a whole: an address with a postcode format that depends on the country beside it, an order line where quantity and price both feed a total, any form where committing field three while field one is still invalid would leave the row briefly wrong. Lattice Grid turns this on with edit: { mode: 'row' }, switching every editable column from an independent cell commit to a single row-level transaction, validated and committed or rolled back together. Because validation runs across the whole draft row rather than one cell in isolation, a rule spanning two columns sees both pending values, not just the one that changed last. Escape on any cell in an open row discards every pending change in that row, not just the field the cursor happened to be on. This is the transactional counterpart to inline editing in a JavaScript data grid built for tabular data entry rather than read-only display.
How do I edit an entire row at once instead of one cell at a time?
Set edit: { mode: 'row' } on the grid. Opening any editable cell in a row puts the whole row into edit mode, so every editable column in it accepts input, and none of the pending values write to the record until the row is committed. Escape reverts the entire row rather than the single cell in focus, and validation rules see the full set of pending values together.