Full Row

Enterprise

Introduction

By default the grid edits one cell at a time. Switch it to full-row editing and starting an edit on any cell opens editors across every editable cell in that row at once — you fill in the whole record, then commit or discard all of it together.

Turn it on with one core option, then add the premium fullRowEditing() helper for the polished layer — a floating Save / Cancel action bar, a row-level validation veto, and an onRowValueChanged callback:

import { fullRowEditing } from '@zengrid/enterprise';

const grid = new Zengrid(mount, {
  columns /* editable cells */,
  editing: { editType: 'fullRow' }, // ← every editable cell in the row opens together
});

const fullRow = fullRowEditing(grid, {
  // block the whole commit unless the row is valid
  validate: ({ values }) => (Number(values[3]) < 1 ? 'Seats must be at least 1' : true),
  onRowValueChanged: ({ row, changes }) => console.log('saved row', row, changes),
});

Double-click any editable cell to open the row; Enter commits the whole row, Escape cancels it, and Tab moves between the row’s editors. A single invalid cell (or a vetoing validate) keeps the row open so nothing is written half-committed.

How committing works

Every path commits the row as a unit:

• Enter or the Save button → validate each editor, then run the row-level validate guard; if all pass, write every changed cell in one go and fire edit:rowCommit / onRowValueChanged.
• Escape or Cancel → discard every editor, write nothing (edit:rowCancel).
• Clicking outside the row commits it (like leaving a spreadsheet row); set editing: { stopEditingWhenCellsLoseFocus: false } to require an explicit Save/Cancel instead.

Values still flow through each column’s valueParser / valueSetter, and each changed cell is recorded for undo/redo — full-row editing changes when the write happens, not how.

Helper options

fullRowEditing(grid, options?):

Option	Type	Purpose
actionBar	boolean	Show the floating Save/Cancel bar on the editing row. Default true.
saveLabel / cancelLabel	string	Button labels (default Save / Cancel).
validate	({ row, values, rowData }) => true | string	Row-level guard run before every commit. values is each open editor’s value keyed by its (view) column index. Return a string to block the commit and show it on the row.
onRowValueChanged	({ row, changes }) => void	Fires after a row commits, with the cells that changed ({ col, field, oldValue, newValue }).

The returned handle exposes save(), cancel(), and destroy().

Without the helper (community)

editType: 'fullRow' itself is core — the row of editors, edit:rowStart / edit:rowCommit / edit:rowCancel events, and the programmatic grid.editing surface (startRowEdit(row), stopRowEdit(cancel?), isEditingRow(), getEditingRow(), setRowValidator(fn)) all work on their own. The enterprise fullRowEditing() helper is the batteries-included layer on top: the action bar, validate, and onRowValueChanged in one call.

Try it live

Edit the whole rowRow-level validationEvents & programmatic API

CodeDemoSplit

ResetRun ⌘⏎

Double-click any cell in a row — every editable cell opens at once (note the accent outline). Tab moves between them, Enter or Save commits the whole row, Escape or Cancel discards it. Change several cells and Save once.

Next

• Validation — invalidEditMode and how a failing value is handled per cell.
• Undo / Redo Edits — every committed cell, including full-row commits, is undoable.
• Batch Editing — apply and roll back many row changes as one transaction.