Blazor Tree Grid Example - Show or Hide Column
This sample demonstrates dynamic show/hide columns feature of Tree Grid. Click the toggle switch in this demo to change the visibility of columns.
Click the switch to toggle visibility
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 34 | In Progress | Critical |
| 2 | Child task 1 | 8/29/2022 | 1 | Validated | Critical |
| 3 | Child task 2 | 8/30/2022 | 98 | Open | Low |
| 4 | Sub task 1 | 8/29/2022 | 67 | Closed | Normal |
| 5 | Sub task 2 | 8/30/2022 | 14 | Closed | Normal |
| 6 | Sub task 3 | 8/31/2022 | 67 | Closed | Normal |
| 7 | Parent task 2 | 8/29/2022 | 52 | Open | Low |
| 8 | Child task 3 | 8/29/2022 | 1 | Validated | Critical |
| 9 | Child task 4 | 8/30/2022 | 98 | Open | Low |
| 10 | Sub task 4 | 8/29/2022 | 67 | Closed | Normal |
| 11 | Sub task 5 | 8/30/2022 | 14 | Closed | Normal |
| 12 | Sub task 6 | 8/31/2022 | 67 | Closed | Normal |
| 13 | Parent task 3 | 8/30/2022 | 25 | Started | High |
| 14 | Child task 5 | 8/29/2022 | 1 | Validated | Critical |
| 15 | Child task 6 | 8/30/2022 | 98 | Open | Low |
| 16 | Sub task 7 | 8/29/2022 | 67 | Closed | Normal |
| 17 | Sub task 8 | 8/30/2022 | 14 | Closed | Normal |
| 18 | Sub task 9 | 8/31/2022 | 67 | Closed | Normal |
| 19 | Parent task 4 | 8/31/2022 | 52 | Open | Low |
| 20 | Child task 7 | 8/29/2022 | 1 | Validated | Critical |
| 21 | Child task 8 | 8/30/2022 | 98 | Open | Low |
| 22 | Sub task 10 | 8/29/2022 | 67 | Closed | Normal |
| 23 | Sub task 11 | 8/30/2022 | 14 | Closed | Normal |
| 24 | Sub task 12 | 8/31/2022 | 67 | Closed | Normal |
| 25 | Parent task 5 | 9/1/2022 | 14 | In Progress | Critical |
| 26 | Child task 9 | 8/29/2022 | 1 | Validated | Critical |
| 27 | Child task 10 | 8/30/2022 | 98 | Open | Low |
| 28 | Sub task 13 | 8/29/2022 | 67 | Closed | Normal |
| 29 | Sub task 14 | 8/30/2022 | 14 | Closed | Normal |
| 30 | Sub task 15 | 8/31/2022 | 67 | Closed | Normal |
| 31 | Parent task 6 | 9/2/2022 | 52 | Started | High |
| 32 | Child task 11 | 8/29/2022 | 1 | Validated | Critical |
| 33 | Child task 12 | 8/30/2022 | 98 | Open | Low |
| 34 | Sub task 16 | 8/29/2022 | 67 | Closed | Normal |
| 35 | Sub task 17 | 8/30/2022 | 14 | Closed | Normal |
| 36 | Sub task 18 | 8/31/2022 | 67 | Closed | Normal |
| 37 | Parent task 7 | 9/3/2022 | 34 | In Progress | Critical |
| 38 | Child task 13 | 8/29/2022 | 1 | Validated | Critical |
| 39 | Child task 14 | 8/30/2022 | 98 | Open | Low |
| 40 | Sub task 19 | 8/29/2022 | 67 | Closed | Normal |
| 41 | Sub task 20 | 8/30/2022 | 14 | Closed | Normal |
| 42 | Sub task 21 | 8/31/2022 | 67 | Closed | Normal |
| 43 | Parent task 8 | 9/4/2022 | 52 | Open | Low |
| 44 | Child task 15 | 8/29/2022 | 1 | Validated | Critical |
| 45 | Child task 16 | 8/30/2022 | 98 | Open | Low |
| 46 | Sub task 22 | 8/29/2022 | 67 | Closed | Normal |
| 47 | Sub task 23 | 8/30/2022 | 14 | Closed | Normal |
| 48 | Sub task 24 | 8/31/2022 | 67 | Closed | Normal |
| 49 | Parent task 9 | 9/5/2022 | 25 | Started | High |
| 50 | Child task 17 | 8/29/2022 | 1 | Validated | Critical |
The Tree Grid column can be shown or hidden dynamically using the ShowColumnsAsync and HideColumnsAsync methods of Tree Grid.
The TreeGridColumn->Visible property decides the visibility of a column. To hide a column at the initial rendering, set the TreeGridColumn->Visible property to false.
More information on showing or hiding columns can be found in this documentation section.