This sample demonstrates the Gantt header template feature. In this sample, custom icons have been shown in the column headers.
Task Name | Start Date | Resources | Duration | Progress |
|---|---|---|---|---|
Product concept | 4/2/2024 | 5 days | 18 | |
Defining the product and its usage | 4/2/2024 | Rose Fuller | 3 days | 30 |
Defining target audience | 4/2/2024 | Margaret Buchanan | 3 days | 0 |
Prepare product sketch and notes | 4/5/2024 | Fuller King | 2 days | 30 |
Concept approval | 4/8/2024 | Martin Tamer | 0 days | 0 |
Market research | 4/9/2024 | 8 days | 15 | |
Demand analysis | 4/9/2024 | 4 days | 15 | |
Customer strength | 4/9/2024 | Davolio Fuller | 4 days | 30 |
Market opportunity analysis | 4/9/2024 | Van Jack | 4 days | 0 |
Competitor analysis | 4/15/2024 | Fuller King | 4 days | 30 |
Product strength analsysis | 4/15/2024 | 4 days | 0 |
Mar 24, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 |
|---|
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 | T | W | T | F |
|---|
The Gantt provides a way to define a custom element in header element. The 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 rendered the customized template for all column headers. More information about the header template can be found in documentation section.