demo D151
Editing a row on a form
Double-click a row to edit it in a drawer, one control per field
rowForm: { fields }
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',
editable: true,
rowForm: {
mode: 'drawer',
title: (ctx) => `Edit ${ctx?.data?.service ?? 'row'}`,
fields: [
{ field: 'service', label: 'Service' },
{ field: 'team', label: 'Team' },
{ field: 'region', label: 'Region' },
{ field: 'tier', label: 'Tier' },
{ field: 'instances', label: 'Instances' },
{ field: 'monthlyCost', label: 'Monthly cost' },
{ field: 'notes', label: 'Notes', editor: 'textarea' },
],
},
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 150 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier' },
{ field: 'instances', title: 'Instances', type: 'number' },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
],
rows, // service records
});
</script>Editing a whole row in a drawer form
A row form opens a record for editing in a drawer or dialog, one labelled control per field, rather than editing cells in place in the grid. A developer reaches for this when a row carries more than fits comfortably across visible columns, when fields need room to breathe, or when the form should include values that are not columns at all: an internal note, a confirmation checkbox, a field derived from two others. Lattice Grid controls this with rowForm: { fields }, where each field names a column or a standalone value and chooses the control that edits it; a double-click on a row opens the form populated from that record. Because the field list is separate from the column definitions, the form and the grid can show different things: a narrow summary grid alongside a full editing form. As a JavaScript data grid, Lattice Grid commits the form as one transaction, so a multi-field edit reverses in a single undo step rather than one per field. The drawer traps focus while open, moves focus to the first control on open and returns it to the originating row on close, and every control carries a programmatic label, so the form is navigable and announced under keyboard and screen reader use.
How do I edit a data grid row in a form instead of inline?
Set rowForm: { fields } on the grid, listing one field per control. Double-clicking a row opens a drawer populated from that record, with a control for each field. Fields can map to columns or to values that are not columns, such as notes or flags, and the form commits as a single transaction that reverses in one undo step.