JavaScript Data GridCell Editing

Enable Editing

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

const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            // enables editing
            editable: true
        }
    ],

    // other grid options ...
}

By default, the grid uses Cell Data Types to provide different editors based on the type of each column. For example, string columns will use a text input, number columns will use a numeric input.

The example below shows 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.