Blazor Tree Grid Example - Header Template
This sample demonstrates Tree Grid header template feature. In this sample, custom icons have been shown in the column headers.
 Task Name
|  Start Date
|  Resources
|  Duration
|  Progress
|
|---|
Planning | 3/2/2021 | 6 | 5 | Open |
Plan timeline | 3/4/2021 | 4 | 5 | In Progress |
Plan budget | 3/6/2021 | 6 | 5 | Started |
Allocate resources | 3/8/2021 | 3 | 5 | Open |
Planning complete | 7/10/2021 | 5 | 1 | Open |
Design | 10/12/2021 | 4 | 3 | In Progress |
Software specification | 10/14/2021 | 3 | 3 | Started |
Develop prototype | 10/16/2021 | 2 | 3 | In Progress |
Get approval from customer | 2/18/2021 | 3 | 2 | In Progress |
Design complete | 2/20/2021 | 6 | 1 | In Progress |
Implementation phase | 2/22/2021 | 5 | 11 | Started |
Phase 1 | 2/24/2021 | 4 | 11 | Open |
Implementation module 1 | 2/26/2021 | 3 | 11 | Started |
Development task 1 | 6/18/2021 | 2 | 3 | In Progress |
Development task 2 | 2/13/2021 | 5 | 3 | Closed |
Testing | 3/2/2021 | 1 | 2 | Closed |
Bug fix | 3/4/2021 | 6 | 2 | Validated |
Customer review meeting | 3/6/2021 | 6 | 2 | Open |
Phase 1 complete | 4/27/2021 | 5 | 2 | Closed |
Phase 2 | 7/17/2021 | 3 | 12 | Open |
Implementation module 2 | 1/17/2021 | 3 | 12 | In Progress |
Development task 1 | 8/17/2021 | 2 | 4 | Closed |
Development task 2 | 4/17/2021 | 5 | 4 | Closed |
Testing | 1/21/2021 | 3 | 2 | Open |
Bug fix | 3/25/2021 | 6 | 2 | Validated |
Customer review meeting | 7/27/2021 | 4 | 2 | In Progress |
Phase 2 complete | 7/19/2021 | 3 | 2 | Open |
Phase 3 | 7/17/2021 | 4 | 11 | In Progress |
Implementation module 3 | 8/17/2021 | 5 | 11 | Validated |
Development task 1 | 11/17/2021 | 3 | 3 | Closed |
Development task 2 | 12/17/2021 | 2 | 3 | Closed |
Testing | 1/1/2021 | 4 | 2 | Closed |
Bug fix | 1/24/2021 | 3 | 2 | Open |
Customer review meeting | 12/26/2021 | 6 | 2 | In Progress |
Phase 3 complete | 5/27/2021 | 5 | 2 | Open |
By using the HeaderTemplate component of TreeGridColumn, custom content can be placed. In this demo, a customized template is rendered for all column headers.
More information on the header template can be found in this documentation section.