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.Edit
CommandButtonType.Delete
CommandButtonType.Cancel
CommandButtonType.Save
More information on command column feature can be found in this documentation section.