Example of Virtual Scrolling in Javascript Tree Grid Control

/
/
Virtual Scrolling

This sample demonstrates the Tree Grid component with the virtual scrolling feature. Scroll the Tree Grid content vertically to load rows.

More Details...

1
VINET
196740190
2
TOMSP
1968420102
3
HANAR
196939789
4
VICTE
1970420102
5
SUPRD
197139789
6
HANAR
1972413104
7
CHOPS
197339789
8
RICSU
1974420102
9
WELLI
197539789
10
HILAA
1976420102
11
ERNSH
1967418109
12
CENTC
1968420102
13
OTTIK
196939789
14
QUEDE
1970420102
15
RATTC
197139789
16
ERNSH
1972416105
17
FOLKO
197339789
18
BLONP
1974420102
19
WARTH
197539789
20
FRANK
1976420102
21
GROSR
1967419109
22
WHITC
1968420102
23
WARTH
196939789
24
SPLIR
1970420102
25
RATTC
197139789
26
QUICK
1972433124
27
VINET
197339789
28
MAGAA
1974420102
29
TORTU
197539789
30
MORGK
1976420102
31
BERGS
1967431120
32
LEHMS
1968420102
33
BERGS
196939789
34
ROMEY
1970420102
35
ROMEY
197139789
36
LILAS
1972443134
37
LEHMS
197339789
38
QUICK
1974420102
Description

The Tree Grid UI virtualization allows you to render only rows visible within the view-port without buffering the entire datasource. To enable the virtualization, set enableVirtualization property as true. By default, enableVirtualMaskRow is set to true. we can change by setting enableVirtualMaskRow property to false. Note: The height property must be defined when enabling enableVirtualization . In this demo, Tree Grid is enabled with row virtualization and also perform the CRUD (Add, Edit, Delete, Update) actions. Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use virtual scrolling feature, we need to inject VirtualScroll using the TreeGrid.Inject(VirtualScroll) section.