Example of Batch Editing in Blazor DataGrid Component
This sample shows how to use the batch editing mode in DataGrid to perform CRUD operations.
Order ID | Customer ID | Freight | Order Date | Ship Country |
---|
10001 | ALFKI | $2.30 | 5/15/1991 | Denmark |
10002 | ANATR | $3.30 | 4/4/1990 | Brazil |
10003 | ANTON | $4.30 | 11/30/1957 | Germany |
10004 | BLONP | $5.30 | 10/22/1930 | Austria |
10005 | BOLID | $6.30 | 2/18/1953 | Switzerland |
10006 | ALFKI | $4.60 | 5/15/1991 | Denmark |
10007 | ANATR | $6.60 | 4/4/1990 | Brazil |
10008 | ANTON | $8.60 | 11/30/1957 | Germany |
10009 | BLONP | $10.60 | 10/22/1930 | Austria |
10010 | BOLID | $12.60 | 2/18/1953 | Switzerland |
10011 | ALFKI | $6.90 | 5/15/1991 | Denmark |
10012 | ANATR | $9.90 | 4/4/1990 | Brazil |
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.