Example of Dialog Template in Blazor DataGrid Component
This example shows how to edit dialog templates 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 dialog template editing features allow you to edit the currently selected row data with a dialog that includes custom components. You can carry out the following CRUD operations:
- 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 in DataGrid can be configured using the GridEditSettings component. It also has various modes for manipulating the datasource.
The modes that are available are,
- Inline
- Batch
In this demo, Dialog mode is enabled for editing by setting Mode to Dialog in the GridEditSettings component. You can begin editing by double-clicking a row or clicking the Edit button on the toolbar. The currently selected row will be displayed on a dialog template, and you will be able to change the row values and save the edited data to the datasource. To render the custom dialog, use the GridEditSettings
component's Template component property.
More information about the Dialog template editing feature can be found in this documentation section.