Blazor DataGrid Example - Command Column
This example shows CRUD operations in DataGrid using the command column.
Order ID | Customer ID | Freight | Order Date | Ship Country | Manage Records |
|---|
| 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 command column feature of the Blazor DataGrid allows you to render CRUD action buttons in a column. The GridColumn component's GridCommandColumns accepts an array of GridCommandColumn components. The GridCommandColumn component's Type property can be used to define the predefined command button.
The Blazor DataGrid provides an option to render CRUD action buttons in a column by using the command column feature. The of the component accepts array of components. The predefined command button can be defined by using Type property of the GridCommandColumn component.
The built-in command buttons are,
- Edit - To edit record, double click a row or click Edit button from command column after selecting a row
- Delete - To delete record, click Delete button from command column after selecting a row
- Update - To save the edited changes, click Update button from command column.
- Cancel - To discard the edited changes, click Cancel button from command column.
More information about the Command column editing can be found in this documentation section.