Batch editing allows you to edit multiple cells or rows in the grid before committing or reverting these edits. This is useful for scenarios where you want to make several edits at once without immediately updating the data source.
Batch editing is an advanced feature only available via the API to allow you to tailor it to your specific needs.
Enabling Batch Editing Copy Link
Batch Editing is enabled by calling the grid API method startBatchEdit().
const gridOptions = {
onGridReady: (params) => {
params.api.startBatchEdit();
},
// other grid options ...
}Once enabled, api.commitBatchEdit() or api.cancelBatchEdit() can be called to complete the batch edit operation.
Batch Edit is only compatible with the Client-Side Row Model.
Batch Editing API Copy Link
Using the following API calls, you can build your own experience around AG Grid's batch editing functionality.
The following example demonstrates a simple batch editing scenario: starting a batch, queuing edits and then either committing them or discarding them.
The grid API methods startEditingCell() and stopEditing() can be used to control the editing state of individual cells. When you start editing a cell after enabling Batch Editing, the grid enters a batch editing mode where it can track changes. isBatchEditing() can be used to check if the grid is currently in batch editing mode. In this mode, startEditingCell() and stopEditing() affect only the cell editors, not the overall batch.
Start batch editing. |
Commit Batch Editing. |
Cancel Batch Editing. |
Returns whether batch editing is currently active. |
Full Row Batch Editing Copy Link
Full Row is supported in Batch Editing, adding each cell's pending value to the batch.
Batch Editing Lifecycle Copy Link
As in default editing, cell and row editing events get fired as normal when edit starts and ends, following the lifecycle of the editors.
When in Batch Editing, the cellValueChanged, rowValueChanged events are fired after the batch edit is committed.
Customisation Copy Link
Custom Renderers & Editors Copy Link
The ICellRendererComp interface provides a means for your cell renderer to update when edits are batched, to reflect the pending nature of the values. The refresh method that the grid calls when the cell needs to be re-rendered. The parameters include the latest pending value.
Properties available on the ICellRendererComp<TData = any> interface.
Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic), then the grid will refresh the cell for you.
|
As with custom renderers, the ICellEditor interface includes the refresh method, which the grid calls when the cell needs to be re-rendered. The parameters include the latest pending value.
Properties available on the ICellEditor<TValue = any> interface.
Optional: Gets called with the latest cell editor params every time they update
|
Styling Copy Link
Pending edit styles can be overridden using css, via the .ag-cell-edit-color and .ag-row-batch-edit classes.
.ag-cell-batch-edit {
background-color: var(--ag-cell-batch-edit-background-color);
color: var(--ag-cell-batch-edit-text-color);
}
.ag-row-batch-edit {
background-color: var(--ag-row-batch-edit-background-color);
color: var(--ag-row-batch-edit-text-color);
}
The following example demonstrates custom batch editing styling: