Blazor Tree Grid Example - Command Column
This sample shows CRUD operations in Tree Grid using the command column. You can perform CRUD operations as follows,
Edit- To edit a record, double-click a row or click Edit button from command column.Delete- To delete a record, click Delete button from command column.Update, Cancel-You can save or discard changes by clicking Update and Cancel button from command column respectively.
Task ID | Task Name | Start Date | Duration | Progress | Manage Records |
|---|
| 1 | Parent task 1 | 8/28/2022 | 34 | In Progress | |
| 2 | Child task 1 | 8/29/2022 | 1 | Validated | |
| 3 | Child task 2 | 8/30/2022 | 98 | Open | |
| 4 | Sub task 1 | 8/29/2022 | 67 | Closed | |
| 5 | Sub task 2 | 8/30/2022 | 14 | Closed | |
| 6 | Sub task 3 | 8/31/2022 | 67 | Closed | |
| 7 | Parent task 2 | 8/29/2022 | 52 | Open | |
| 8 | Child task 3 | 8/29/2022 | 1 | Validated | |
| 9 | Child task 4 | 8/30/2022 | 98 | Open | |
| 10 | Sub task 4 | 8/29/2022 | 67 | Closed | |
| 11 | Sub task 5 | 8/30/2022 | 14 | Closed | |
| 12 | Sub task 6 | 8/31/2022 | 67 | Closed |
The Tree Grid allows you to display CRUD action buttons in a column by using the TreeGridCommandColumn component of TreeGridColumn. The predefined command button can be defined by setting the following values to Type property of TreeGridCommandColumn.
CommandButtonType.EditCommandButtonType.DeleteCommandButtonType.CancelCommandButtonType.Save
More information on command column feature can be found in this documentation section.