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().
<ag-grid-vue
:onGridReady="onGridReady"
/* other grid options ... */>
</ag-grid-vue>
this.onGridReady = (params) => {
params.api.startBatchEdit();
};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.
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: