Angular Data Grid: Cell Editing

Enable Editing

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

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    {
        field: 'athlete',
        // enables editing
        editable: true
    }
];

By default the grid provides simple string editing and stores the result as a string. The example below shows string editing enabled on all columns by setting editable=true on the defaultColDef.

Example: Simple Cell Editing

Conditional Editing

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

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

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

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.

Example: Conditional Cell Editing

Editing Events

Cell editing results in the following events.