Blazor Tree Grid Example - Reorder
This sample demonstrates reordering feature of the Tree Grid columns. You can reorder the columns by simply dragging and dropping them to the desired position.
Task ID | Task Name | Start Date | End Date | Duration | Progress |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | In Progress |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Closed |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Open |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Closed |
Reordering can be enabled by setting the AllowReordering property to true. Reordering is performed by dragging and dropping the column header from one index to another.
The location where the column will be placed is indicated by two arrow symbols.
More information on reordering can be found in this documentation section.