Example of Task Label Template in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Task Label Template

This sample explains the way of rendering label template for left, right, and task labels by mapping template elements to the leftLabel, rightLabel and taskLabel properties in labelSettings.

More Details...

1
Project initiation
4/2/20244/5/20244 days0
2
Identify site location
4/2/20244/2/20240 days30Martin Tamer
3
Perform soil test
4/2/20244/5/20244 days2FS0Rose Fuller,Margaret Buchanan,Davolio Fuller
4
Soil test approval
4/5/20244/5/20240 days3FS30
5
Project estimation
4/8/20244/15/20246 days15
6
Develop floor plan for estimation
4/8/20244/10/20243 days4FS30
7
List materials
4/11/20244/15/20243 days6FS0Fuller King,Jack Davolio
8
Estimation approval
4/15/20244/15/20240 days7FS0Construction Supervisor,Davolio Fuller
9
Sign contract
4/16/20244/16/20241 day8FS30Construction Supervisor
10
Project approval and kick off
4/16/20244/16/20240 days9FS0
11
Site work
4/17/20244/22/20244 days15
12
Clear the building site
4/17/20244/18/20242 days9FS30
13
Install temporary power service
4/19/20244/22/20242 days12FS0
Project initiation [ 0% ]
0%
Identify site location [ 30% ]
Martin TamerMartin Tamer
Perform soil test [ 0% ]
0%
Rose FullerRose FullerMargaret BuchananMargaret BuchananDavolio FullerDavolio Fuller
Soil test approval [ 30% ]
Project estimation [ 15% ]
15%
Develop floor plan for estimation [ 30% ]
30%
List materials [ 0% ]
0%
Fuller KingFuller KingJack DavolioJack Davolio
Estimation approval [ 0% ]
Construction SupervisorConstruction SupervisorDavolio FullerDavolio Fuller
Sign contract [ 30% ]
30%
Construction SupervisorConstruction Supervisor
Project approval and kick off [ 0% ]
Site work [ 15% ]
15%
Clear the building site [ 30% ]
30%
Install temporary power service [ 0% ]
0%
Description

In this demo, the label template is rendered using the leftLabel, rightLabel and taskLabel properties in labelSettings. Injecting Module: Gantt control features are segregated into individual feature-wise modules.To use a selection, inject the Selection module using the Gantt.Inject(Selection) method.To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method.