This sample demonstrates the frozen columns feature of the Tree Grid. Scroll the movable content horizontally to view the frozen columns with the content.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority | Approved |
---|---|---|---|---|---|---|---|
1 | Planning | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal | false |
2 | Plan timeline | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal | false |
3 | Plan budget | 2/3/2017 | 2/7/2017 | 5 | 100 | Low | true |
4 | Allocate resources | 2/3/2017 | 2/7/2017 | 5 | 100 | Critical | false |
5 | Planning complete | 2/7/2017 | 2/7/2017 | 0 | 0 | Low | true |
6 | Design | 2/10/2017 | 2/14/2017 | 3 | 86 | High | false |
7 | Software Specification | 2/10/2017 | 2/12/2017 | 3 | 60 | Normal | false |
8 | Develop prototype | 2/10/2017 | 2/12/2017 | 3 | 100 | Critical | false |
9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | Low | true |
10 | Design Documentation | 2/13/2017 | 2/14/2017 | 2 | 100 | High | true |
11 | Design complete | 2/14/2017 | 2/14/2017 | 0 | 0 | Normal | true |
12 | Implementation Phase | 2/17/2017 | 2/27/2017 | 11 | 66 | Normal | false |
13 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 50 | High | false |
14 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 10 | Normal | false |
15 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | High | false |
16 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | true |
17 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Normal | true |
18 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | Critical | false |
19 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | High | false |
20 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Low | true |
21 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 60 | High | false |
22 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 90 | Critical | false |
23 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 | Normal | true |
24 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 | Critical | true |
25 | Testing | 2/21/2017 | 2/24/2017 | 2 | 0 | High | false |
26 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 0 | Low | false |
27 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 0 | Critical | true |
28 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 0 | 50 | Normal | false |
29 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 30 | Normal | false |
30 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 60 | High | false |
31 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | true |
32 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Normal | false |
33 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Critical | true |
34 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | High | false |
35 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | Normal | true |
36 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Critical | false |
The freezing feature enables the user to freeze certain columns to scroll remaining movable content. This can be achieved by setting frozenColumns property.
Note: In this demo sample, the first two columns is set to frozen by using the frozenColumns
properties.
Injecting Module:
Tree Grid features are segregated into individual feature-wise modules.
To use frozen columns feature, we need to inject
Freeze
module into the services
.