Angular Tree Grid undefined Example

This sample demonstrates the frozen rows and columns feature of the Tree Grid. Scroll the movable content horizontally to view the frozen columns with the content.

Column

Freeze Direction

Task ID

Task Name

Start Date

End Date

Duration

Progress

Priority

Designation

EmployeeID

Approved

_gridcontrol_header_table

1	Planning	2/3/2017	2/7/2017	5	100	Normal	Vice President	1
2	Plan timeline	2/3/2017	2/7/2017	5	100	Normal	Chief Executive Officer	2
3	Plan budget	2/3/2017	2/7/2017	5	100	Low	Chief Executive Officer	3
4	Allocate resources	2/3/2017	2/7/2017	5	100	Critical	Chief Executive Officer	4
5	Planning complete	2/7/2017	2/7/2017	0	0	Low	Chief Executive Officer	5
6	Design	2/10/2017	2/14/2017	3	86	High	Vice President	6
7	Software Specification	2/10/2017	2/12/2017	3	60	Normal	Sales Representative	7
8	Develop prototype	2/10/2017	2/12/2017	3	100	Critical	Sales Representative	8
9	Get approval from customer	2/13/2017	2/14/2017	2	100	Low	Sales Representative	9
10	Design Documentation	2/13/2017	2/14/2017	2	100	High	Sales Representative	10
11	Design complete	2/14/2017	2/14/2017	0	0	Normal	Sales Representative	11
12	Implementation Phase	2/17/2017	2/27/2017	11	66	Normal	Vice President	12
13	Phase 1	2/17/2017	2/27/2017	11	50	High	Sales Representative	13
14	Implementation Module 1	2/17/2017	2/27/2017	11	10	Normal	Sales Representative	14
15	Development Task 1	2/17/2017	2/19/2017	3	50	High	Sales Representative	15
16	Development Task 2	2/17/2017	2/19/2017	3	50	Low	Sales Representative	16
17	Testing	2/20/2017	2/21/2017	2	0	Normal	Sales Representative	17
18	Bug fix	2/24/2017	2/25/2017	2	0	Critical	Sales Representative	18
19	Customer review meeting	2/26/2017	2/27/2017	2	0	High	Sales Representative	19
20	Phase 1 complete	2/27/2017	2/27/2017	0	50	Low	Sales Representative	20
21	Phase 2	2/17/2017	2/28/2017	12	60	High	Sales Representative	21
22	Implementation Module 2	2/17/2017	2/28/2017	12	90	Critical	Sales Representative	22
23	Development Task 1	2/17/2017	2/20/2017	4	50	Normal	Sales Representative	23
24	Development Task 2	2/17/2017	2/20/2017	4	50	Critical	Sales Representative	24
25	Testing	2/21/2017	2/24/2017	2	0	High	Sales Representative	25
26	Bug fix	2/25/2017	2/26/2017	2	0	Low	Sales Representative	26
27	Customer review meeting	2/27/2017	2/28/2017	2	0	Critical	Sales Representative	27
28	Phase 2 complete	2/28/2017	2/28/2017	0	50	Normal	Sales Representative	28
29	Phase 3	2/17/2017	2/27/2017	11	30	Normal	Sales Representative	29
30	Implementation Module 3	2/17/2017	2/27/2017	11	60	High	Sales Representative	30
31	Development Task 1	2/17/2017	2/19/2017	3	50	Low	Sales Representative	31
32	Development Task 2	2/17/2017	2/19/2017	3	50	Normal	Sales Representative	32
33	Testing	2/20/2017	2/21/2017	2	0	Critical	Sales Representative	33
34	Bug fix	2/24/2017	2/25/2017	2	0	High	Sales Representative	34
35	Customer review meeting	2/26/2017	2/27/2017	2	0	Normal	Sales Representative	35
36	Phase 3 complete	2/27/2017	2/27/2017	0	50	Critical	Sales Representative	36

Description

The freezing feature enables the user to freeze certain rows/columns at both sides to scroll remaining movable content. This can be achieved by setting freeze property.

In this demo sample, the Task ID column freezed at left side and Approved column is freezed at right side by using the freeze properties.

Injecting Module:

Tree Grid features are segregated into individual feature-wise modules. To use frozen columns feature, we need to inject FreezeService the @NgModule.providers section.

Example of undefined in Angular Tree Grid Component