Blazor DataGrid Example - Batch Editing

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

The Blazor DataGrid batch editing feature enables you to start editing by double-clicking a cell and modifying its value. You can perform CRUD operations as follows:

• Add - Click the Add toolbar button to create a new record.
• Edit - Double-click a row or click the Edit toolbar button after selecting a row to modify data.
• Delete - Click the Delete toolbar button after selecting a row to remove a record.
• Update - Click the Update toolbar button to save all edited changes.
• Cancel - Click the Cancel toolbar button to discard all edited changes.

CRUD operations are configured in the DataGrid using the GridEditSettings component. You must define at least one column as a primary key using the IsPrimaryKey property in the GridColumn component.

The available edit modes are:

• Inline - Edit records directly within the grid rows
• Dialog - Edit records in a modal dialog

By default, new rows are added at the top of the DataGrid. You can change this behavior by setting the NewRowPosition property to Batch in GridEditSettings.

In this demo, batch mode is enabled by setting the Mode property to Batch in the GridEditSettings component. Begin editing by double-clicking a cell and changing its value. When navigating to a new cell, the edited cell is highlighted to indicate which cells have been modified. Bulk save all edited data to the datasource by clicking the Update button on the toolbar.

For more detailed information about batch editing, refer to the batch editing documentation.