Example of Inline Editing in Blazor DataGrid Component
This sample shows how to use the inline or normal editing mode in DataGrid to perform CRUD operations.
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 |
The Blazor DataGrid Normal editing features allow you to edit the currently selected record by changing the state of the corresponding record to edit. You can carry out the following CRUD operations:
- 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 in DataGrid can be configured using the GridEditSettings component. Any one of the columns should be defined as a primary key using the GridColumn
component's IsPrimaryKey property. It also has various modes for manipulating the datasource.
The modes that are available are,
- Dialog
- Batch
In this sample, the ShowAddNewRow
property in the GridEditSettings has been enabled. This property guarantees the continuous display of a new blank row within the grid content, simplifying the process of adding new records effortlessly.
By default, a new row will be added at the top of the DataGrid. You can change it by setting the NewRowPosition to Bottom in GridEditSettings
.
More information about the Normal editing feature can be found in this documentation section.