Blazor DataGrid Example - Dialog Template
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 |
This sample demonstrates how to implement custom dialog templates in the DataGrid for performing CRUD operations with enhanced customization.
The Blazor DataGrid dialog template editing feature enables you to edit row data within a customized modal dialog that includes your own components and layouts. You can perform the following CRUD operations:
- 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.
- 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, which supports multiple edit modes:
- Inline - Edit records directly within grid rows
- Batch - Edit multiple records with batch operations
In this demo, dialog mode is enabled by setting the Mode property to Dialog in GridEditSettings. Begin editing by double-clicking a row or clicking the Edit button on the toolbar.
Customize the dialog appearance using the GridEditSettings component's Template property to render your custom dialog with tailored form fields and components. The currently selected row data will be displayed in your custom dialog template, allowing you to modify values and save changes to the datasource.
For more detailed information about dialog template editing, refer to the dialog template documentation.