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
.
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.
Editing Events
Cell editing results in the following events.