To enable Cell Editing for a Column use the editable property on the Column Definition.
editable
boolean | EditableCallback
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable. Default: false
editable: boolean | EditableCallback<TData>;
interface EditableCallback<TData = any> {
(params: EditableCallbackParams<TData>) : boolean
}
interface EditableCallbackParams<TData = any> {
// Row node for the given row
node: RowNode<TData>;
// Data associated with the node. Will be `undefined` for group rows.
data: TData | undefined;
// Column for this callback
column: Column;
// ColDef provided for this column
colDef: ColDef<TData>;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
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.
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 2012editable:(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 editableColumnColumn 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.
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 paste operation.
onCellValueChanged = (
event: CellValueChangedEvent<TData>
) => void;
interface CellValueChangedEvent<TData = any, TValue = any> {
oldValue: any;
newValue: any;
source: string | undefined;
column: Column;
colDef: ColDef<TData>;
// The value for the cell
value: TValue;
// The user provided data for the row.
data: TData;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
cellEditRequest
CellEditRequestEvent
Value has changed after editing. Only fires when doing Read Only Edits, ie readOnlyEdit=true. See Read Only Edits.
onCellEditRequest = (
event: CellEditRequestEvent<TData>
) => void;
interface CellEditRequestEvent<TData = any, TValue = any> {
oldValue: any;
newValue: any;
source: string | undefined;
column: Column;
colDef: ColDef<TData>;
// The value for the cell
value: TValue;
// The user provided data for the row.
data: TData;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
onCellEditingStarted = (
event: CellEditingStartedEvent<TData>
) => void;
interface CellEditingStartedEvent<TData = any, TValue = any> {
column: Column;
colDef: ColDef<TData>;
// The value for the cell
value: TValue;
// The user provided data for the row.
data: TData;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
onCellEditingStopped = (
event: CellEditingStoppedEvent<TData>
) => void;
interface CellEditingStoppedEvent<TData = any, TValue = any> {
// The old value before editing
oldValue: any;
// The new value after editing
newValue: any;
// Property indicating if the value of the editor has changed
valueChanged: boolean;
column: Column;
colDef: ColDef<TData>;
// The value for the cell
value: TValue;
// The user provided data for the row.
data: TData;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
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. See Full Row Editing.
onRowEditingStarted = (
event: RowEditingStartedEvent<TData>
) => void;
interface RowEditingStartedEvent<TData = any> {
// The user provided data for the row. Data is `undefined` for row groups.
data: TData | undefined;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
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. See Full Row Editing.
onRowEditingStopped = (
event: RowEditingStoppedEvent<TData>
) => void;
interface RowEditingStoppedEvent<TData = any> {
// The user provided data for the row. Data is `undefined` for row groups.
data: TData | undefined;
// The row node.
node: RowNode<TData>;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: RowPinnedType;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
// Event identifier
type: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
