JavaScript Data GridCell Editing

Enable Editing

To enable Cell Editing for a Column use the editable property on the Column Definition.

editable
boolean | EditableCallback
default: false
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            // enables editing
            editable: true
        }
    ],

    // other grid options ...
}

If Cell Data Types are enabled, the grid provides different types of editors, with the result stored in the correct format. If disabled, simple string editing is provided, and the result is stored as a string.

The example below shows string editing enabled on all columns by setting editable=true on the defaultColDef.

Conditional Editing

To dynamically determine which cells are editable, a callback function can be supplied to the editable property on the Column Definition:

const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            // conditionally enables editing for data for 2012
            editable: (params) => params.data.year == 2012
        }
    ],

    // other grid options ...
}

In the snippet above, Athlete cells will be editable on rows where the Year is 2012.

This is demonstrated in the following example, note that:

  • An editable callback is added to the Athlete and Age columns to control which cells are editable based on the selected Year.
  • A custom editableColumn Column Type is used to avoid duplication of the callback for Athlete and Age.
  • Buttons are provided to change the Year used by the editable callback function to control which cells are editable.
  • A blue Cell Style has been added to highlight editable cells using the same logic as the editable callback.

Editing Events

Cell editing results in the following events.

cellValueChanged
CellValueChangedEvent
Value has changed after editing (this event will not fire if editing was cancelled, eg ESC was pressed) or if cell value has changed as a result of cut, paste, cell clear (pressing Delete key), fill handle, copy range down, undo and redo.
cellEditRequest
CellEditRequestEvent
Value has changed after editing. Only fires when readOnlyEdit=true.
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
rowEditingStarted
RowEditingStartedEvent
Editing a row has started (when row editing is enabled). When row editing, this event will be fired once and cellEditingStarted will be fired for each individual cell. Only fires when doing Full Row Editing.
rowEditingStopped
RowEditingStoppedEvent
Editing a row has stopped (when row editing is enabled). When row editing, this event will be fired once and cellEditingStopped will be fired for each individual cell. Only fires when doing Full Row Editing.