Blazor Gantt Chart Example - Custom Header Templates
This sample demonstrates the Gantt header template feature. In this sample, custom icons have been shown in the column headers.
ID |
Job Name
|
Resources
|
Start Date
|
End Date
|
Duration
|
Progress
|
|---|
| 1 | Project initiation | 3/29/2021 | 4/1/2021 | 4 days | 12 | |
| 2 | Identify site location | Martin Tamer, Van Jack | 3/29/2021 | 3/30/2021 | 2 days | 30 |
| 3 | Perform soil test | Rose Fuller, Margaret Buchanan, Van Jack | 3/29/2021 | 4/1/2021 | 4 days | 0 |
| 4 | Soil test approval | Jack Davolio, Tamer Vinet | 3/29/2021 | 3/29/2021 | 1 day | 30 |
| 5 | Project estimation | 3/29/2021 | 4/5/2021 | 6 days | 22 | |
| 6 | Develop floor plan for estimation | Fuller King | 3/29/2021 | 3/31/2021 | 3 days | 30 |
| 7 | List materials | Fuller King, Jack Davolio | 4/1/2021 | 4/5/2021 | 3 days | 30 |
| 8 | Estimation approval | Construction Supervisor, Davolio Fuller | 4/1/2021 | 4/2/2021 | 2 days | 0 |
| 9 | Sign contract | Construction Supervisor, Davolio Fuller | 3/31/2021 | 3/31/2021 | 1 day | 0 |
| 10 | Electrical layout design | Electrical Engineer | 4/2/2021 | 4/6/2021 | 3 days | 0 |
| 11 | HVAC system planning | Mechanical Lead | 4/5/2021 | 4/8/2021 | 4 days | 0 |
| 12 | Architectural drawing review | Architectural Consultant | 4/5/2021 | 4/6/2021 | 2 days | 0 |
| 13 | On-site inspection | Site Inspector | 4/5/2021 | 4/6/2021 | 2 days | 0 |
Mar 24, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 |
W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M |
By using the HeaderTemplate component of the GanttColumn, custom content can be placed. In this demo, a customized template is rendered for all column headers.
For more details, refer to the documentation section.