You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/grid/virtual-scrolling.md
+7-5Lines changed: 7 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,9 @@ position: 55
10
10
11
11
# Virtual Scrolling
12
12
13
-
Virtual scrolling is an alternative to paging. Instead of using a pager, the user scrolls vertically through all records in the data source. The same set of elements is reused to improve performance. While the new data is loading, a loading indicator is shown on the cells.
13
+
Virtual scrolling is an alternative to paging. Instead of using a pager, the user scrolls vertically through all records in the data source.
14
+
15
+
The same set of elements is reused to improve performance. While the next data is loading, a loading indicator is shown on the cells. If the user scrolls back up after scrolling down to a next page, the previous page will be loaded anew from the data source, like with regular paging.
14
16
15
17
## Requirements
16
18
@@ -77,12 +79,13 @@ To enable virtual scrolling:
77
79
78
80
There are several things to keep in mind when using virtual scrolling:
79
81
80
-
* The `Height` of the grid must be in pixels. The `RowHeight` is a decimal value that is always considered as pixel values.
82
+
* The `RowHeight` is a decimal value that is always considered as pixel values. If you use [row emplate]({%slug components/grid/features/templates%}#row-template), make sure it matches the `RowHeight`. The `Height` does not have to be in pixels, but it may help you calculate the `PageSize` (see below).
81
83
* Do not mix virtualization with paging, as they are alternatives to the same feature.
84
+
* Provide for a `PageSize` of the Grid that is large enough, so that the loaded table rows do not fit in the scrollable data area, otherwise the vertical virtual scrollbar will not be created and scrolling will not work. To do this, take into account the `Height` of the grid and the `RowHeight`.
82
85
* You can control how many rows are rendered through the `PageSize`. If performance does not suit your needs, tweak mostly that property (for example, if latency is high - fetch larger chunks of data so that a remote service is called less often; or when the browser is responding slowly, decrease the page size to render fewer DOM elements).
83
86
* When using the [`OnRead` event]({%slug components/grid/manual-operations%}), use the `PageSize` and `Skip` parameters to know what data to return, instead of `PageSize` and `Page` as with regular paging.
84
87
* Horizontal scrolling is not virtualized, all columns are rendered.
85
-
* Provide for a page size of the Grid that is large enough, so that the table rows do not fit in the scrollable data area, otherwise the vertical virtual scrollbar will not be created and scrolling will not work. The page size of the Grid should be over three times larger than the number of visible table rows in the data area.
88
+
86
89
87
90
## Limitations
88
91
@@ -92,9 +95,8 @@ List of the known limitations of the virtual scrolling feature:
92
95
93
96
*[Hierarchy]({%slug components/grid/features/hierarchy%}) is not supported.
94
97
*[Grouping]({%slug components/grid/features/grouping%}) is not supported.
95
-
*[Row Templates]({%slug components/grid/features/templates%}#row-template) are not supported.
0 commit comments