This sample demonstrates the way of binding self-referential flat data to Tree Grid component.
Task ID | Task Name | Start Date | End Date | Duration | Progress |
|---|---|---|---|---|---|
| 1 | Parent Task 1 | 2/23/2017 | 2/27/2017 | 3 | 40 |
| 2 | Child Task 1 | 2/23/2017 | 2/27/2017 | 4 | 40 |
| 3 | Child Task 2 | 2/23/2017 | 2/27/2017 | 2 | 40 |
| 4 | Child Task 3 | 2/23/2017 | 2/27/2017 | 2 | 40 |
| 5 | Parent Task 2 | 3/14/2017 | 3/18/2017 | 6 | 40 |
| 6 | Child Task 1 | 3/2/2017 | 3/6/2017 | 11 | 40 |
| 7 | Child Task 2 | 3/2/2017 | 3/6/2017 | 7 | 40 |
| 8 | Child Task 3 | 3/2/2017 | 3/6/2017 | 10 | 40 |
| 9 | Child Task 4 | 3/2/2017 | 3/6/2017 | 15 | 40 |
| 10 | Parent Task 3 | 3/9/2017 | 3/13/2017 | 17 | 40 |
| 11 | Child Task 1 | 3/9/2017 | 3/13/2017 | 0 | 40 |
| 12 | Child Task 2 | 3/9/2017 | 3/13/2017 | 10 | 40 |
Tree Grid can be bound either to local or remote data services. The{" "}
dataSource property can be assigned either with the array
of JavaScript objects or instance of DataManager.
In this demo, the array of self-referential flat data with parent ID is assigned as the data source to the Tree Grid.
More information on the self-referential data binding can be found in this documentation section.