Blazor Tree Grid Example - Frozen Columns
This sample demonstrates the frozen columns feature of the Tree Grid. Scroll the movable content horizontally to view the frozen columns with the content.
Task ID | Task Name | Duration | Start Date | End Date | Progress | Priority | Approved |
|---|
| 1 | Parent task 1 | 34 | 8/28/2022 | 9/15/2027 | In Progress | Critical | |
| 2 | Child task 1 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 3 | Child task 2 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 4 | Sub task 1 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 5 | Sub task 2 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 6 | Sub task 3 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 7 | Parent task 2 | 52 | 8/29/2022 | 9/16/2027 | Open | Low | |
| 8 | Child task 3 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 9 | Child task 4 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 10 | Sub task 4 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 11 | Sub task 5 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 12 | Sub task 6 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 13 | Parent task 3 | 25 | 8/30/2022 | 9/17/2027 | Started | High | |
| 14 | Child task 5 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 15 | Child task 6 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 16 | Sub task 7 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 17 | Sub task 8 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 18 | Sub task 9 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 19 | Parent task 4 | 52 | 8/31/2022 | 9/18/2027 | Open | Low | |
| 20 | Child task 7 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 21 | Child task 8 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 22 | Sub task 10 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 23 | Sub task 11 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 24 | Sub task 12 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 25 | Parent task 5 | 14 | 9/1/2022 | 9/19/2027 | In Progress | Critical | |
| 26 | Child task 9 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 27 | Child task 10 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 28 | Sub task 13 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 29 | Sub task 14 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 30 | Sub task 15 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 31 | Parent task 6 | 52 | 9/2/2022 | 9/20/2027 | Started | High | |
| 32 | Child task 11 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 33 | Child task 12 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 34 | Sub task 16 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 35 | Sub task 17 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 36 | Sub task 18 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 37 | Parent task 7 | 34 | 9/3/2022 | 9/21/2027 | In Progress | Critical | |
| 38 | Child task 13 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 39 | Child task 14 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 40 | Sub task 19 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 41 | Sub task 20 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 42 | Sub task 21 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 43 | Parent task 8 | 52 | 9/4/2022 | 9/22/2027 | Open | Low | |
| 44 | Child task 15 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical | |
| 45 | Child task 16 | 98 | 8/30/2022 | 7/2/2025 | Open | Low | |
| 46 | Sub task 22 | 67 | 8/29/2022 | 6/29/2024 | Closed | Normal | |
| 47 | Sub task 23 | 14 | 8/30/2022 | 6/30/2024 | Closed | Normal | |
| 48 | Sub task 24 | 67 | 8/31/2022 | 7/1/2024 | Closed | Normal | |
| 49 | Parent task 9 | 25 | 9/5/2022 | 9/23/2027 | Started | High | |
| 50 | Child task 17 | 1 | 8/29/2022 | 7/1/2025 | Validated | Critical |
You can dynamically add or remove frozen columns by simply dragging and dropping the column freeze line separator to the desired column. Frozen line moving can be enabled by setting the AllowFreezeLineMoving property to true.
The freezing feature enables users to freeze certain columns while scrolling through the remaining movable content. This can be achieved by setting the Freeze property.
In this demo, the first and last columns are frozen by using the Freeze property.