Example of Batch Editing in Blazor DataGrid Component

DataGrid / Editing / Batch Editing

This sample shows how to use the batch editing mode in DataGrid to perform CRUD operations.

1 of 7 pages (75 items)

The Blazor DataGrid Batch editing features allows you to start editing by double clicking a cell and change the cell value. You can perform CRUD operations as follows:

  • Add - To add new record, click Add toolbar button.
  • Edit - To edit record, double click a row or click toolbar Edit button after selecting a row.
  • Delete - To delete record, click toolbar Delete button after selecting a row.
  • Update - To save the edited changes, click toolbar Update button.
  • Cancel - To discard the edited changes, click toolbar Cancel button.

The CRUD operations can be configured in DataGrid using GridEditSettings component. Any one of the columns should be defined as a primary key using the GridColumn component's IsPrimaryKey property. It also has different modes to manipulate the datasource.

The available modes are,

  • Inline
  • Dialog

By default, a new row will be added to the DataGrid's top. You can change it by setting the NewRowPosition to Batch in GridEditSettings.

Batch mode is enabled for editing in this demo by setting Mode to Batch in the GridEditSettings component. You can begin editing by double-clicking a cell and changing its value. While navigating to a new cell, the edited cell will be highlighted so you know which cells have been edited. The edited data can then be bulk saved to the datasource by clicking the Update button on the toolbar.

More information about the Batch editing feature can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE