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 onGridReady = (params) => {
params.api.startBatchEdit();
};
<AgGridReact onGridReady={onGridReady} />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.
Starts a batch editing session. While batch editing is active, cell edits are accumulated
as pending values without being committed to the row data. The pending values are only
written when commitBatchEdit() is called, or discarded when cancelBatchEdit() is called.
Calling startBatchEdit() while a batch is already active is a no-op.
Use isBatchEditing() to check whether a batch session is currently active.
Any active cell editor is cancelled when the batch session starts.
The batchEditingStarted event is fired lazily on the first actual cell edit within the
batch session, not when startBatchEdit() is called.
Only supported with the Client-Side Row Model. |
Commits all pending batch edits to the row data and ends the batch editing session.
Each accumulated pending value is written via rowNode.setDataValue(), and the
batchEditingStopped event is fired with the committed edits.
Calling commitBatchEdit() when no batch is active is a no-op.
If no cells were edited during the batch session (i.e. batchEditingStarted was never
fired), batchEditingStopped is not fired either.
Only supported with the Client-Side Row Model. |
Cancels all pending batch edits, reverting cells to their original values, and ends
the batch editing session. The batchEditingStopped event is fired with an empty edit map.
Calling cancelBatchEdit() when no batch is active is a no-op.
If no cells were edited during the batch session (i.e. batchEditingStarted was never
fired), batchEditingStopped is not fired either.
Only supported with the Client-Side Row Model. |
Returns true if a batch editing session is currently active (i.e. startBatchEdit()
has been called and neither commitBatchEdit() nor cancelBatchEdit() has been called yet). |
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.
Pending Values Copy Link
When Batch Editing is active, edits made to cells are stored as pending values. These pending values are not immediately applied to the underlying data model. Instead, they are held in a temporary state until the batch is either committed or canceled.
Pending values are used by display features such as cell rendering and copy/paste but they are not used for data based features such as sorting, filtering, grouping or aggregation until the batch is committed.
Retrieving Values During Batch Editing Copy Link
The api.getCellValue() method retrieves the display value for a cell. It can retrieve values at different stages using the from parameter:
'edit'(default): Current editing value, including live typing and pending batch values'batch': Pending batch value, excluding live typing'data': Stored data value, ignoring all edit state
Gets the cell value for the given column and rowNode (row). Will return the cell value or the formatted value depending on the value of params.useFormatter. |
Use rowNode.getDataValue(colKey) to retrieve the committed data value, ignoring pending edits. Unlike getCellValue() with from='edit', which returns the current editing value, getDataValue() returns the resolved value (including valueGetters, aggregation for group rows, and computed formulas) but excludes pending edits and display formatting.
// Returns the committed data value, ignoring pending edits
const dataValue = rowNode.getDataValue('price');
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: