Blazor DataGrid Example - Inline Editing
Order ID | Customer ID | Order Date | Freight | Order Time | Ship Country |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 10:00 AM | Denmark |
| 10002 | ANATR | 4/4/1990 | $3.30 | 11:30 AM | Brazil |
| 10003 | ANTON | 11/30/1957 | $4.30 | 12:00 PM | Germany |
| 10004 | BLONP | 10/22/1930 | $5.30 | 3:30 PM | Austria |
| 10005 | BOLID | 2/18/1953 | $6.30 | 4:30 PM | Switzerland |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 10:00 AM | Denmark |
| 10007 | ANATR | 4/4/1990 | $6.60 | 11:30 AM | Brazil |
| 10008 | ANTON | 11/30/1957 | $8.60 | 12:00 PM | Germany |
| 10009 | BLONP | 10/22/1930 | $10.60 | 3:30 PM | Austria |
| 10010 | BOLID | 2/18/1953 | $12.60 | 4:30 PM | Switzerland |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 10:00 AM | Denmark |
| 10012 | ANATR | 4/4/1990 | $9.90 | 11:30 AM | Brazil |
This sample demonstrates how to use inline editing mode in the DataGrid to perform CRUD operations directly within grid rows.
The Blazor DataGrid inline editing feature enables you to edit the currently selected record by changing its state to edit mode. You can perform the following CRUD operations:
- Edit - Double-click a row or click the Edit toolbar button after selecting a row
- Delete - Click the Delete toolbar button after selecting a row
- Update - Click the Update toolbar button to save changes
- Cancel - Click the Cancel toolbar button to discard changes
Configure CRUD operations using the GridEditSettings component. Define at least one column as a primary key using the GridColumn component's IsPrimaryKey property.
The available edit modes are:
- Dialog - Edit in a modal dialog
- Batch - Edit multiple records with batch save
In this demo, the GridEditSettings includes the ShowAddNewRow property, which displays a new blank row within the grid for convenient record addition.
By default, new rows are added at the top. Change this by setting the NewRowPosition to Bottom.
For more detailed information about inline editing, refer to the inline editing documentation.