Blazor Tree Grid Example - Resizing
This sample demonstrates the Tree Grid column resizing feature. Click and drag at the right corner of each column header to resize the column.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | In Progress | Critical |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Validated | Critical |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Open | Low |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Closed | Normal |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Closed | Normal |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Closed | Normal |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Open | Low |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Validated | Critical |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Open | Low |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Closed | Normal |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Closed | Normal |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Closed | Normal |
The Tree Grid columns can be resized by clicking and dragging the right edge of the column header. Set the AllowResizing property to true to enable column resizing in Tree Grid. You can also prevent resizing of a particular column by setting TreeGridColumn.AllowResizing to false in the column definition.
More information on resizing can be found in this documentation section.