This sample demonstrates the way of binding self-referential flat data to the Gantt component.
ID | Name | Start Date | End Date | Duration | Dependency | Progress |
|---|---|---|---|---|---|---|
| 1 | Project Schedule | 2/5/2024 | 2/19/2024 | 11 days | 78 | |
| 2 | Planning | 2/5/2024 | 2/12/2024 | 6 days | 75 | |
| 3 | Plan timeline | 2/5/2024 | 2/12/2024 | 6 days | 60 | |
| 4 | Plan budget | 2/5/2024 | 2/12/2024 | 6 days | 90 | |
| 5 | Allocate resources | 2/5/2024 | 2/12/2024 | 6 days | 75 | |
| 6 | Planning complete | 2/12/2024 | 2/12/2024 | 0 days | 3FS,4FS,5FS | 0 |
| 7 | Design | 2/13/2024 | 2/19/2024 | 5 days | 85 | |
| 8 | Software Specification | 2/13/2024 | 2/15/2024 | 3 days | 6FS | 60 |
| 9 | Develop prototype | 2/13/2024 | 2/15/2024 | 3 days | 6FS | 100 |
| 10 | Get approval from customer | 2/16/2024 | 2/19/2024 | 2 days | 9FS | 100 |
| 11 | Design complete | 2/19/2024 | 2/19/2024 | 0 days | 10FS | 0 |
Jan 28, 2024 | Feb 04, 2024 | Feb 11, 2024 | Feb 18, 2024 | Feb 25, 2024 | Mar 03, 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 |
|---|
Gantt can be bound either to local or remote data services.
The dataSource property can be assigned either with the array of JavaScript objects or an instance of DataManager.
In this demo, the array of self-referential flat data with parentID is assigned as data source to the Gantt.
Gantt component 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.