Skip to content
ZenGrid

Start / Stop Editing

Community

Introduction

Section titled “Introduction”

An edit has a lifecycle: it starts (an editor opens on a cell), then stops — either committing the new value or cancelling back to the original. @zengrid/core wires the common triggers out of the box and lets you reshape them through the editing option on GridOptions:

const grid = new Zengrid(mount, {
  columns,
  editing: {
    singleClick: true,                    // open on one click, not two
    typeToEdit: true,                     // start typing to edit
    enterStartsEditing: false,            // reserve Enter for navigation
    stopEditingWhenCellsLoseFocus: false, // clicking away keeps the editor open
  },
});

Only editable columns with an editor ever open — everything below applies to those cells; read-only columns ignore all of it.

Starting an edit

Section titled “Starting an edit”

By default an edit starts when the user:

Trigger Default
Double-clicks an editable cell Always on
Selects a cell and presses Enter enterStartsEditing: true
Single-clicks an editable cell singleClick: false — opt in
Starts typing on the active cell typeToEdit: false — opt in
Calls grid.editing.startEdit(cell) Programmatic

typeToEdit seeds the editor with the character typed and puts the caret at the end, so typing Ac then continuing gives Acme — spreadsheet-style type-to-replace. Set enterStartsEditing: false when you want Enter to move the selection instead of opening an editor.

Stopping an edit

Section titled “Stopping an edit”

While an editor is open:

Action Result
Enter / Tab Commit the value and close.
Escape Cancel — restore the original value.
Click another cell / outside Commit, when stopEditingWhenCellsLoseFocus (default).
Scroll the cell out of view Cancel (the editor can’t float over nothing).
grid.editing.commitEdit() / cancelEdit() Commit / cancel from code.

Set stopEditingWhenCellsLoseFocus: false to keep the editor open when focus moves elsewhere — only Enter, Tab, or Escape will then close it. If a commit fails validation, editing.invalidEditMode decides what happens — see Validation.

Try it live

Section titled “Try it live”

Each tab is a different start/stop setup. Edit the code and watch the grid react.

singleClick:true opens the editor on one click instead of two — click any Name/Role/Revenue/MRR cell. Double-click and Enter still work. Region has no editor, so it never opens.

Next

Section titled “Next”