Skip to content

Commit 831737d

Browse files
docs(grid): improvements on virtual scrolling facts
1 parent 88b259d commit 831737d

File tree

1 file changed

+7
-5
lines changed

1 file changed

+7
-5
lines changed

components/grid/virtual-scrolling.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ position: 55
1010

1111
# Virtual Scrolling
1212

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.
1416

1517
## Requirements
1618

@@ -77,12 +79,13 @@ To enable virtual scrolling:
7779

7880
There are several things to keep in mind when using virtual scrolling:
7981

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).
8183
* 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`.
8285
* 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).
8386
* 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.
8487
* 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+
8689

8790
## Limitations
8891

@@ -92,9 +95,8 @@ List of the known limitations of the virtual scrolling feature:
9295

9396
* [Hierarchy]({%slug components/grid/features/hierarchy%}) is not supported.
9497
* [Grouping]({%slug components/grid/features/grouping%}) is not supported.
95-
* [Row Templates]({%slug components/grid/features/templates%}#row-template) are not supported.
9698

9799
## See Also
98100

99-
* [Live Demo: Grid Sorting](https://demos.telerik.com/blazor-ui/grid/sorting)
101+
* [Live Demo: Grid Virtual Scrolling](https://demos.telerik.com/blazor-ui/grid/virtual-scrolling)
100102

0 commit comments

Comments
 (0)