This sample demonstrates the Tree Grid component with the virtual scrolling feature. Scroll the Tree Grid content vertically to load rows.
Player Jersey | Player Name | Year | Stint | TMID |
---|---|---|---|---|
1 | VINET | 1967 | 401 | 90 |
2 | TOMSP | 1968 | 420 | 102 |
3 | HANAR | 1969 | 397 | 89 |
4 | VICTE | 1970 | 420 | 102 |
5 | SUPRD | 1971 | 397 | 89 |
6 | HANAR | 1972 | 413 | 104 |
7 | CHOPS | 1973 | 397 | 89 |
8 | RICSU | 1974 | 420 | 102 |
9 | WELLI | 1975 | 397 | 89 |
10 | HILAA | 1976 | 420 | 102 |
11 | ERNSH | 1967 | 418 | 109 |
12 | CENTC | 1968 | 420 | 102 |
13 | OTTIK | 1969 | 397 | 89 |
14 | QUEDE | 1970 | 420 | 102 |
15 | RATTC | 1971 | 397 | 89 |
16 | ERNSH | 1972 | 416 | 105 |
17 | FOLKO | 1973 | 397 | 89 |
18 | BLONP | 1974 | 420 | 102 |
19 | WARTH | 1975 | 397 | 89 |
20 | FRANK | 1976 | 420 | 102 |
21 | GROSR | 1967 | 419 | 109 |
22 | WHITC | 1968 | 420 | 102 |
23 | WARTH | 1969 | 397 | 89 |
24 | SPLIR | 1970 | 420 | 102 |
25 | RATTC | 1971 | 397 | 89 |
26 | QUICK | 1972 | 433 | 124 |
27 | VINET | 1973 | 397 | 89 |
28 | MAGAA | 1974 | 420 | 102 |
29 | TORTU | 1975 | 397 | 89 |
30 | MORGK | 1976 | 420 | 102 |
31 | BERGS | 1967 | 431 | 120 |
32 | LEHMS | 1968 | 420 | 102 |
33 | BERGS | 1969 | 397 | 89 |
34 | ROMEY | 1970 | 420 | 102 |
35 | ROMEY | 1971 | 397 | 89 |
36 | LILAS | 1972 | 443 | 134 |
37 | LEHMS | 1973 | 397 | 89 |
38 | QUICK | 1974 | 420 | 102 |
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
module into the services
.