Blazor DataGrid Example - Batch Editing
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
ID | Product Name | Total Vendor Units | Vendor A (units) | Vendor B (units) | Vendor C (units) | Vendor D (units) | Price (per unit) |
|---|
| 1001 | MacBook Pro
IT Asset | 190 | 55 | 40 | 60 | 35 | $1,200.00 |
| 1002 | Wireless Mouse
IT Asset | 405 | 120 | 95 | 110 | 80 | $25.00 |
| 1003 | 4K Monitor
IT Asset | 175 | 45 | 50 | 38 | 42 | $400.00 |
| 1004 | WiFi Router
IT Infrastructure | 295 | 75 | 68 | 80 | 72 | $120.00 |
| 1005 | SSD Drive
IT Asset | 393 | 110 | 90 | 105 | 88 | $150.00 |
| 1006 | Network Switch
IT Infrastructure | 123 | 30 | 25 | 40 | 28 | $220.00 |
| 1007 | Laser Printer
Admin | 75 | 18 | 22 | 15 | 20 | $500.00 |
| 1008 | Conference Camera
Security | 215 | 60 | 55 | 48 | 52 | $350.00 |
| 1009 | Smart Door Lock
Facilities | 145 | 40 | 35 | 32 | 38 | $180.00 |
| 1010 | Biometric Scanner
Security | 85 | 22 | 18 | 25 | 20 | $275.00 |
| 1011 | POS Terminal
Finance | 325 | 85 | 78 | 82 | 80 | $450.00 |
| 1012 | Cash Drawer
Finance | 185 | 50 | 45 | 48 | 42 | $95.00 |
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.
- Undo - Click the Undo toolbar button or press Ctrl+Z to reverse the most recent batch editing action.
- Redo - Click the Redo toolbar button or press Ctrl+Y to reapply the most recently undone action.
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.
Undo and redo support is enabled by setting the EnableUndoRedoproperty to true in GridEditSettings. It is supported only in batch edit mode and maintains a history of cell edits, row additions, row deletions, paste operations, and autofill operations. In this sample, use the checkbox to dynamically enable or disable the feature.
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.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit our Blazor DataGrid component page.