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
*[Serialize the DataSoureRequest to the server](https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server)
@@ -277,9 +278,7 @@ This sample shows how to set up the grid to use grouping with manual data source
277
278
278
279
When using [aggregates](slug:grid-aggregates) with `OnRead`, the Grid expects you to set one more property of the `GridReadEventArgs` object - `AggregateResults`. Otherwise the component will show aggregate values for the current page only.
When using [virtual Grid scrolling](slug:components/grid/virtual-scrolling), get the values of `args.Request.Skip` and `args.Request.PageSize` to determine the current Grid scroll offset and load the correct data items. Do not use `args.Request.Page` with virtual scrolling, because it is always `1`.
The TreeList virtual scrolling feature allows users to scroll vertically through all records in the data source. The feature is an alternative to paging.
13
14
14
-
Virtual scrolling provides an alternative to paging. Instead of utilizing a pager, the user scrolls vertically through all records in the data source.
15
+
To enhance the rendering performance, the TreeList reuses the same set of HTML elements. Loading indicators (skeletons) appear in the table cells during scrolling and data loading. If the user scrolls back up after scrolling down to the next set of rows, the previous data reloads from the data source, similar to regular paging, with the scroll distance determining the data to be loaded.
15
16
16
-
To enhance rendering performance, the TreeList reuses the same set of HTML elements. As the next data loads, a loading indicator appears on the cells. If the user scrolls back up after scrolling down to the next set of rows, the previous data reloads from the data source, similar to regular paging, with the scroll distance determining the data to be loaded.
17
+
You can also use the [Blazor TreeList virtualization for the TreeList columns](slug:treelist-columns-virtual).
17
18
18
19
## Using Virtual Scrolling
19
20
20
-
* Set the `ScrollMode` parameter to `TreeListScrollMode.Virtual` (the default value is `Scrollable`).
21
-
* Set the `Height` and `RowHeight` parameters.
21
+
To enable Blazor TreeList row virtualization:
22
22
23
-
>caption Enable virtual scrolling in the Telerik TreeList for Blazor
23
+
1. Set the `ScrollMode` parameter to `TreeListScrollMode.Virtual` (the default value is `Scrollable`).
24
+
1.[Set the `Height` parameter](#height) to a `string` CSS value.
25
+
1.[Set the `RowHeight` parameter](#rowheight) to a `decimal` value that denotes pixels.
26
+
1.[Set the `PageSize` parameter](#pagesize).
27
+
28
+
> The values of the `Height`, `RowHeight`, and `PageSize` parameters are related to one another. The following sections explain how.
29
+
30
+
## Height
31
+
32
+
Set the TreeList `Height` parameter to any [valid `string` CSS value](slug:common-features/dimensions), for example, `px`, `%`, `em`, or `vh`. If the TreeList should expand vertically, accoding to the available space, then check the article [Adjust Grid Height to Match the Browser Viewport Height](slug:grid-kb-adjust-height-with-browser).
33
+
34
+
Set the `Height` value, so that users can't see the whole [`PageSize` of items](#pagesize) at once. Otherwise, empty row skeletons may display in the TreeList while users are not scrolling.
35
+
36
+
## PageSize
37
+
38
+
Set the TreeList `PageSize` parameter to an `int` value. The `PageSize` determines how many table rows are populated and rendered at any given time.
39
+
40
+
Set the `PageSize` value, so that the rendered table rows do fit in the [TreeList height](#height). At least one table row must be completely invisible. Otherwise, empty row skeletons may display in the TreeList while users are not scrolling. The exact `PageSize` value allows you to balance between better user experience and rendering efficiency:
41
+
42
+
* A larger `PageSize` value will make the TreeList display empty row skeletons more rarely while users are scrolling down. At the same time, the TreeList may be re-rendering the same data items repetitively if the user scrolls just a little.
43
+
* A smaller `PageSize` will make the TreeList render a smaller number of items on each user scroll. At the same time, users will see row skeletons sooner or more frequently during scrolling.
44
+
45
+
## RowHeight
46
+
47
+
Set the `RowHeight` parameter to a `decimal` value. The TreeList uses it to set an inline `height` style in pixels to all TreeList table rows (`<tr>`).
48
+
49
+
The `RowHeight` value must be large enough to accommodate the cell content in all rows, even if the content differs. In other words, the `RowHeight` setting must apply the same or greater table row height than what the browser would normally render. The effective row height depends on:
50
+
51
+
* The cell content and text wrapping
52
+
* The CSS theme, including font size, line height, and cell paddings.
53
+
54
+
For example, the following list shows the minimum valid `RowHeight` values when using the [built-in CSS themes](slug:themes-overview), single-line plain text content, and no command buttons:
55
+
56
+
*`36` for the Default theme (`14px` font size, `20px` line height, and 2 * `8px` vertical paddings)
57
+
*`40` for the Bootstrap theme (`16px` font size, `24px` line height, and 2 * `8px` vertical paddings)
58
+
*`48` for the Material theme (`14px` font size, `28px` line height, and 2 * `10px` vertical paddings)
59
+
*`44` for the Fluent theme (`14px` font size, `20px` font size and 2 * `12px` vertical paddings)
60
+
61
+
> Browsers treat table row `height` styles as `min-height` styles. If the table row content cannot fit in the set `RowHeight`, the browser expands the table row. The TreeList configuration must not allow this to happen. It is crucial that all TreeList table rows display with the same effective height when using virtial scrolling, otherwise the virtual scrolling experience will break.
62
+
63
+
The `RowHeight` parameter value cannot change at runtime, unless the application recreates the whole TreeList component by removing it from the web page temporarily.
64
+
65
+
If necessary, you can also use the `RowHeight` parameter without virtual row scrolling.
66
+
67
+
## Limitations
68
+
69
+
There is a [browser limitation, which affects the maximum number of data items in a virtual TreeList](slug:grid-kb-virtualization-many-records). The problem occurs with millions of items and you can partially mitigate it by [changing the TreeList styles to make the row height smaller](slug:grid-kb-reduce-row-height).
70
+
71
+
In addition to virtual scrolling, another approach to optimize the rendering performance is to use [TreeList paging](slug:treelist-paging).
There are several things to keep in mind when using virtual scrolling:
116
+
#region Data Service
75
117
76
-
* The `RowHeight` is a decimal value that is always interpreted as pixels. The TreeList `Height` does not have to be in pixels, but it may help you calculate the `PageSize` (see below).
* If the row/cell height the browser renders is larger than the `RowHeight` value, the browser will ignore it. It can depend on the chosen Theme, other CSS rules, or cell data that occupies more than one row. Inspect the rendered HTML to make sure the grid setting matches the rendering.
122
+
private readonly int TreeLevelCount;
123
+
private readonly int RootItemCount;
124
+
private readonly int ChildItemCount;
79
125
80
-
The default TreeList rendering has padding in the cells, and the loading sign has a line height set in order to render. This may impose some minimum heights that can vary with the theme and/or custom styles on the page.
126
+
private int LastId { get; set; }
127
+
private Random Rnd { get; set; } = Random.Shared;
81
128
82
-
* The `RowHeight` must not change at runtime, because the new dimensions will cause issues with the scrolling logic.
129
+
public async Task<List<Employee>> Read()
130
+
{
131
+
await SimulateAsyncOperation();
132
+
return Items;
133
+
}
83
134
84
-
* Browser zoom or monitor DPI settings can cause the browser to render different dimensions than the expected and/or non-integer values, which can break the virtualization logic.
135
+
private async Task SimulateAsyncOperation()
136
+
{
137
+
await Task.Delay(100);
138
+
}
85
139
86
-
* Do not mix virtualization with paging, as they are alternatives to the same feature.
140
+
private void PopulateChildren(List<Employee> items, int? parentId, int level)
141
+
{
142
+
int itemCount = level == 1 ? RootItemCount : ChildItemCount;
* Provide for a `PageSize` of the TreeList 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 TreeList and the `RowHeight`.
163
+
public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2)
164
+
{
165
+
TreeLevelCount = treeLevelCount;
166
+
RootItemCount = rootItemCount;
167
+
ChildItemCount = childItemCount;
168
+
List<Employee> items = new();
169
+
PopulateChildren(items, null, 1);
170
+
Items = items;
171
+
}
172
+
}
89
173
90
-
* The `PageSize` controls how many rows are rendered at any given time, and how many items are requested from the data source when loading data on demand. You should avoid setting large page sizes, you need to only fill up the TreeList data viewport.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments