Example of Batch Editing in React Grid Component


This sample demonstrates CRUD operations in Grid. You can perform CRUD operations as follows,

  • Add - To add a new record, click the add toolbar button.
  • Edit - To edit record, double-click a cell.
  • Delete - To delete record, click the toolbar delete button after selecting a row.
  • Update and Cancel - Save or discard changes by clicking the toolbar update and cancel button respectively.
More Details...


Grid supports CRUD operations and they can be configured using editSettings. It has the following modes to manipulate the datasource.

  • Normal
  • Dialog
  • Batch

In this demo, the Batch mode is enabled for editing by defining the editSettings.mode as batch. You can start editing by double clicking a cell and changing the cell value. The edited cell will be highlighted while navigating to a new cell. You can bulk save the edited data to the datasource by clicking the toolbar's update button or by externally invoking the batchSave method.

Injecting Module:

Grid features are separated into feature-wise modules. To use the editing feature, inject the Edit module into the services.

More information on the batch editing can be found in this documentation section.