Example of Default Scrolling in React Tree Grid Component

All Controls
/
Treegrid
/
DefaultScrolling

This sample demonstrates the Tree Grid component with the horizontal and vertical scrollbars to view the exceeded Tree Grid content.

More Details...

1
Planning
2/3/20172/7/20175100Normalfalse
2
Plan timeline
2/3/20172/7/20175100Normalfalse
3
Plan budget
2/3/20172/7/20175100Lowtrue
4
Allocate resources
2/3/20172/7/20175100Criticalfalse
5
Planning complete
2/7/20172/7/201700Lowtrue
6
Design
2/10/20172/14/2017386Highfalse
7
Software Specification
2/10/20172/12/2017360Normalfalse
8
Develop prototype
2/10/20172/12/20173100Criticalfalse
9
Get approval from customer
2/13/20172/14/20172100Lowtrue
10
Design Documentation
2/13/20172/14/20172100Hightrue
11
Design complete
2/14/20172/14/201700Normaltrue
12
Implementation Phase
2/17/20172/27/20171166Normalfalse
13
Phase 1
2/17/20172/27/20171150Highfalse
14
Implementation Module 1
2/17/20172/27/20171110Normalfalse
15
Development Task 1
2/17/20172/19/2017350Highfalse
16
Development Task 2
2/17/20172/19/2017350Lowtrue
17
Testing
2/20/20172/21/201720Normaltrue
18
Bug fix
2/24/20172/25/201720Criticalfalse
19
Customer review meeting
2/26/20172/27/201720Highfalse
20
Phase 1 complete
2/27/20172/27/2017050Lowtrue
21
Phase 2
2/17/20172/28/20171260Highfalse
22
Implementation Module 2
2/17/20172/28/20171290Criticalfalse
23
Development Task 1
2/17/20172/20/2017450Normaltrue
24
Development Task 2
2/17/20172/20/2017450Criticaltrue
25
Testing
2/21/20172/24/201720Highfalse
26
Bug fix
2/25/20172/26/201720Lowfalse
27
Customer review meeting
2/27/20172/28/201720Criticaltrue
28
Phase 2 complete
2/28/20172/28/2017050Normalfalse
29
Phase 3
2/17/20172/27/20171130Normalfalse
30
Implementation Module 3
2/17/20172/27/20171160Highfalse
31
Development Task 1
2/17/20172/19/2017350Lowtrue
32
Development Task 2
2/17/20172/19/2017350Normalfalse
33
Testing
2/20/20172/21/201720Criticaltrue
34
Bug fix
2/24/20172/25/201720Highfalse
35
Customer review meeting
2/26/20172/27/201720Normaltrue
36
Phase 3 complete
2/27/20172/27/2017050Criticalfalse
Description

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 vertical scrollbar appears when the total height of rows in the Tree Grid exceeds its element's height.
  • The horizontal scrollbar appears when the sum of the column`s width exceeds the Tree Grid element's width.

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.