This sample demonstrates the default rendering of the Tree Grid with minimum configuration.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
|---|---|---|---|---|---|---|
| 1 | Planning | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal |
| 2 | Plan timeline | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal |
| 3 | Plan budget | 2/3/2017 | 2/7/2017 | 5 | 100 | Low |
| 4 | Allocate resources | 2/3/2017 | 2/7/2017 | 5 | 100 | Critical |
| 5 | Planning complete | 2/7/2017 | 2/7/2017 | 0 | 0 | Low |
| 6 | Design | 2/10/2017 | 2/14/2017 | 3 | 86 | High |
| 7 | Software Specification | 2/10/2017 | 2/12/2017 | 3 | 60 | Normal |
| 8 | Develop prototype | 2/10/2017 | 2/12/2017 | 3 | 100 | Critical |
| 9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | Low |
| 10 | Design Documentation | 2/13/2017 | 2/14/2017 | 2 | 100 | High |
| 11 | Design complete | 2/14/2017 | 2/14/2017 | 0 | 0 | Normal |
| 12 | Implementation Phase | 2/17/2017 | 2/27/2017 | 11 | 66 | Normal |
The Tree Grid component is used to display and manipulate hierarchy data with configuration options to control the way the data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager; binding data fields to columns.
The user needs to import TreeGridModule into the application to use Tree Grid component. The TreeGridModule contains declarations required to instantiate the Tree Grid component.
ejs-treegrid is the CSS selector to render Tree Grid component.
In this demo, the Tree Grid is populated with its minimum default settings.
More information on the Tree Grid instantiation can be found in this documentation section.