Blazor Tree Grid Example - Column Chooser
This sample demonstrates the Tree Grid column chooser feature. Click the column chooser icon in the toolbar to open column chooser and you can select columns to hide/show from the checkbox list.
Task ID | Task Name | Start Date | End Date | Duration | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | Critical |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Low |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 13 | Parent task 3 | 8/30/2022 | 9/17/2027 | 25 | High |
| 14 | Child task 5 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 15 | Child task 6 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 16 | Sub task 7 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 17 | Sub task 8 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 18 | Sub task 9 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 19 | Parent task 4 | 8/31/2022 | 9/18/2027 | 52 | Low |
| 20 | Child task 7 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 21 | Child task 8 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 22 | Sub task 10 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 23 | Sub task 11 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 24 | Sub task 12 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 25 | Parent task 5 | 9/1/2022 | 9/19/2027 | 14 | Critical |
| 26 | Child task 9 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 27 | Child task 10 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 28 | Sub task 13 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 29 | Sub task 14 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 30 | Sub task 15 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 31 | Parent task 6 | 9/2/2022 | 9/20/2027 | 52 | High |
| 32 | Child task 11 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 33 | Child task 12 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 34 | Sub task 16 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 35 | Sub task 17 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 36 | Sub task 18 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 37 | Parent task 7 | 9/3/2022 | 9/21/2027 | 34 | Critical |
| 38 | Child task 13 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 39 | Child task 14 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 40 | Sub task 19 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 41 | Sub task 20 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 42 | Sub task 21 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 43 | Parent task 8 | 9/4/2022 | 9/22/2027 | 52 | Low |
| 44 | Child task 15 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 45 | Child task 16 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 46 | Sub task 22 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 47 | Sub task 23 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 48 | Sub task 24 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 49 | Parent task 9 | 9/5/2022 | 9/23/2027 | 25 | High |
| 50 | Child task 17 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 51 | Child task 18 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 52 | Sub task 25 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 53 | Sub task 26 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 54 | Sub task 27 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 55 | Parent task 10 | 9/6/2022 | 9/24/2027 | 52 | Low |
| 56 | Child task 19 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 57 | Child task 20 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 58 | Sub task 28 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 59 | Sub task 29 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 60 | Sub task 30 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 61 | Parent task 11 | 9/7/2022 | 9/25/2027 | 34 | Critical |
| 62 | Child task 21 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 63 | Child task 22 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 64 | Sub task 31 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 65 | Sub task 32 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 66 | Sub task 33 | 8/31/2022 | 7/1/2024 | 67 | Normal |
| 67 | Parent task 12 | 9/8/2022 | 9/26/2027 | 52 | High |
| 68 | Child task 23 | 8/29/2022 | 7/1/2025 | 1 | Critical |
| 69 | Child task 24 | 8/30/2022 | 7/2/2025 | 98 | Low |
| 70 | Sub task 34 | 8/29/2022 | 6/29/2024 | 67 | Normal |
| 71 | Sub task 35 | 8/30/2022 | 6/30/2024 | 14 | Normal |
| 72 | Sub task 36 | 8/31/2022 | 7/1/2024 | 67 | Normal |
Choose Column
- Select All
- Task ID
- Start Date
- End Date
- Duration
- Priority
The Tree Grid columns can be shown/hidden dynamically by using column chooser functionality. To enable column chooser, set the ShowColumnChooser property as true. Some columns can also be excluded in the column chooser checkbox list by using the ShowInColumnChooser of TreeGridColumn.
More information on the column chooser can be found in this documentation section.