This sample demonstrates the Tree Grid component with the horizontal and vertical scrollbars to view the exceeded Tree Grid 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 Tree Grid will show scrollbars when the content exceeds the element's width or height. The vertical and horizontal scrollbars will be displayed based on the following criteria.
The height
and width
properties are used to set the Tree Grid height and width, respectively. The value of these properties can be a numeric, pixel(px
) or percentage (%
).
In this demo, the height
and width
properties of the Tree Grid are set to 400 and auto,
respectively. Now, the Tree Grid will render with a vertical scrollbar when the total height of rows
exceeds its element height and horizontal scrollbar will appear when the
total column width exceeds the element's width.