Blazor DataGrid Example - External Form Editing
Order ID | Customer ID | Freight | Order Date | Ship Country | Ship Name |
|---|
| 10001 | ALFKI | $2.30 | 5/15/1991 | Denmark | Simons bistro |
| 10002 | ANATR | $3.30 | 4/4/1990 | Brazil | Queen Cozinha |
| 10003 | ANTON | $4.30 | 11/30/1957 | Germany | Frankenversand |
| 10004 | BLONP | $5.30 | 10/22/1930 | Austria | Ernst Handel |
| 10005 | BOLID | $6.30 | 2/18/1953 | Switzerland | Hanari Carnes |
| 10006 | ALFKI | $4.60 | 5/15/1991 | Denmark | Simons bistro |
| 10007 | ANATR | $6.60 | 4/4/1990 | Brazil | Queen Cozinha |
| 10008 | ANTON | $8.60 | 11/30/1957 | Germany | Frankenversand |
| 10009 | BLONP | $10.60 | 10/22/1930 | Austria | Ernst Handel |
| 10010 | BOLID | $12.60 | 2/18/1953 | Switzerland | Hanari Carnes |
| 10011 | ALFKI | $6.90 | 5/15/1991 | Denmark | Simons bistro |
| 10012 | ANATR | $9.90 | 4/4/1990 | Brazil | Queen Cozinha |
This sample demonstrates how to edit DataGrid records using an external custom edit form.
The Blazor DataGrid supports CRUD operations through an external edit form using dedicated editing methods. This approach separates the form interface from the grid, providing greater flexibility in UI design.
To edit grid records in this demo:
- Select the desired row from the DataGrid
- The selected row data is automatically displayed in the external form
- Modify the data values in the form fields as needed
- Click the Save button to persist changes to the datasource
Using external form editing allows you to implement custom validation logic, formatting, and UI components tailored to your specific requirements while maintaining seamless integration with the DataGrid.
For more detailed information about custom external form editing, refer to the custom form editing documentation.