This sample demonstrates the Tree Grid header template feature. In this sample, we have shown custom icons in the column headers.
 Task Name |  Start Date |  Resources |  Duration |  Progress |
|---|---|---|---|---|
Planning | 2/3/2017 | 8 | 5 | 100 |
Plan timeline | 2/3/2017 | 2 | 5 | 100 |
Plan budget | 2/3/2017 | 1 | 5 | 100 |
Allocate resources | 2/3/2017 | 1 | 5 | 100 |
Planning complete | 2/7/2017 | 7 | 0 | 100 |
Design | 2/10/2017 | 1 | 3 | 60 |
Software Specification | 2/10/2017 | 2 | 3 | 60 |
Develop prototype | 2/10/2017 | 3 | 3 | 100 |
Get approval from customer | 2/13/2017 | 1 | 2 | 100 |
Design complete | 2/14/2017 | 9 | 0 | 100 |
Implementation Phase | 2/17/2017 | 5 | 5 | 80 |
Phase | 2/17/2017 | 7 | 5 | 50 |
Description
The Tree Grid provides a way to define a custom element in header element. columns->headertemplate property accepts
either string or HTML element`s ID value, which will be used as the template for the header cell.
In this demo, we have render customized template for all column headers.
More information about Header template can be found in documentation section.