To enable Cell Editing for a Column, set editable=true on the Column Definition.
<ag-grid-vue
:columnDefs="columnDefs"/* other grid options ... */></ag-grid-vue>this.columnDefs =[{
field:'name',// turns on editing
editable:true},{
field:'age',
editable:true}];
By default the grid provides for simple String editing and stores the result as a String. The example below shows simple String editing on all Columns by setting editable=true on the Default Column Definition.
Value has changed after editing. This event will not fire if editing was cancelled (eg ESC was pressed).
onCellValueChanged = (
event: CellValueChangedEvent
) => void;
interface CellValueChangedEvent {
oldValue: any;
newValue: any;
source: string | undefined;
column: Column;
colDef: ColDef;
// The value for the cell
value: any;
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}
cellEditRequest
CellEditRequestEvent
Value has changed after editing. Only fires when doing Read Only Edits, ie readOnlyEdit=true. See Read Only Edits.
onCellEditRequest = (
event: CellEditRequestEvent
) => void;
interface CellEditRequestEvent {
oldValue: any;
newValue: any;
source: string | undefined;
column: Column;
colDef: ColDef;
// The value for the cell
value: any;
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
onCellEditingStarted = (
event: CellEditingStartedEvent
) => void;
interface CellEditingStartedEvent {
column: Column;
colDef: ColDef;
// The value for the cell
value: any;
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
onCellEditingStopped = (
event: CellEditingStoppedEvent
) => void;
interface CellEditingStoppedEvent {
// The old value before editing
oldValue: any;
// The new value after editing
newValue: any;
column: Column;
colDef: ColDef;
// The value for the cell
value: any;
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}
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
) => void;
interface RowEditingStartedEvent {
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}
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
) => void;
interface RowEditingStoppedEvent {
node: RowNode;
// The user provided data for the row
data: any;
// The visible row index for the row
rowIndex: number | null;
// Either 'top', 'bottom' or null / undefined (if not set)
rowPinned: string | null;
// The context as provided on `gridOptions.context`
context: any;
// If event was due to browser event (eg click), this is the browser event
event?: Event | null;
api: GridApi;
columnApi: ColumnApi;
// Event identifier
type: string;
}