Vue tree-grid default Example

This sample demonstrates the default rendering of the Tree Grid with minimum configuration.

Task ID

Task Name

Start Date

End Date

Duration

Progress

Priority

_gridcontrol_header_table

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
13	Phase 1	2/17/2017	2/27/2017	11	50	High
14	Implementation Module 1	2/17/2017	2/27/2017	11	10	Normal
15	Development Task 1	2/17/2017	2/19/2017	3	50	High
16	Development Task 2	2/17/2017	2/19/2017	3	50	Low
17	Testing	2/20/2017	2/21/2017	2	0	Normal
18	Bug fix	2/24/2017	2/25/2017	2	0	Critical
19	Customer review meeting	2/26/2017	2/27/2017	2	0	High
20	Phase 1 complete	2/27/2017	2/27/2017	0	50	Low
21	Phase 2	2/17/2017	2/28/2017	12	60	High
22	Implementation Module 2	2/17/2017	2/28/2017	12	90	Critical
23	Development Task 1	2/17/2017	2/20/2017	4	50	Normal
24	Development Task 2	2/17/2017	2/20/2017	4	50	Critical
25	Testing	2/21/2017	2/24/2017	2	0	High
26	Bug fix	2/25/2017	2/26/2017	2	0	Low
27	Customer review meeting	2/27/2017	2/28/2017	2	0	Critical
28	Phase 2 complete	2/28/2017	2/28/2017	0	50	Normal
29	Phase 3	2/17/2017	2/27/2017	11	30	Normal
30	Implementation Module 3	2/17/2017	2/27/2017	11	60	High
31	Development Task 1	2/17/2017	2/19/2017	3	50	Low
32	Development Task 2	2/17/2017	2/19/2017	3	50	Normal
33	Testing	2/20/2017	2/21/2017	2	0	Critical
34	Bug fix	2/24/2017	2/25/2017	2	0	High
35	Customer review meeting	2/26/2017	2/27/2017	2	0	Normal
36	Phase 3 complete	2/27/2017	2/27/2017	0	50	Critical

The Tree Grid is used to represent the hierarchical data in a tabular format, combining the visual representation of Grid and TreeView controls. It represents the data from datasource such as an array of JSON objects, OData web services, or DataManager binding data fields to columns or self-referential datasource.

In this demo, the Tree Grid is populated with its minimum default settings.

More information on the TreeGrid default can be found in this documentation section.

Example of default in Vue tree-grid Component