React Data GridBatch Editing

Enterprise

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.

startBatchEditCopy Link
Function
Start batch editing.
commitBatchEditCopy Link
Function
Commit Batch Editing.
cancelBatchEditCopy Link
Function
Cancel Batch Editing.
isBatchEditingCopy Link
Function
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.

refreshCopy Link
Function
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.

refreshCopy Link
Function
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: