|
| 1 | +--- |
| 2 | +title: Virtual Scrolling |
| 3 | +page_title: TreeList - Virtual Scrolling |
| 4 | +description: Enable and configure the virtual scrolling of rows in the TreeList for Blazor. |
| 5 | +slug: treelist-virtual-scrolling |
| 6 | +tags: telerik,blazor,treelist,virtual,rows,scrolling |
| 7 | +published: True |
| 8 | +position: 25 |
| 9 | +--- |
| 10 | + |
| 11 | +# TreeList Virtual Scrolling |
| 12 | + |
| 13 | + |
| 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 | + |
| 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 | + |
| 18 | +## Using Virtual Scrolling |
| 19 | + |
| 20 | +* Set the `ScrollMode` parameter to `TreeListScrollMode.Virtual` (the default value is `Scrollable`). |
| 21 | +* Set the `Height` and `RowHeight` parameters. |
| 22 | + |
| 23 | +>caption Enable Sorting in Telerik TreeList |
| 24 | +
|
| 25 | +````CSHTML |
| 26 | +<TelerikTreeList Data="@TreeListData" |
| 27 | + ScrollMode="@TreeListScrollMode.Virtual" |
| 28 | + Height="500px" |
| 29 | + RowHeight="50" |
| 30 | + IdField="@nameof(Employee.Id)" |
| 31 | + ParentIdField="@nameof(Employee.ParentId)" |
| 32 | + Sortable="true" |
| 33 | + FilterMode="@TreeListFilterMode.FilterMenu"> |
| 34 | + <TreeListColumns> |
| 35 | + <TreeListColumn Expandable="true" Field="FirstName" Title="First Name" /> |
| 36 | + <TreeListColumn Field="LastName" Title="Last Name" /> |
| 37 | + <TreeListColumn Field="Position" /> |
| 38 | + </TreeListColumns> |
| 39 | +</TelerikTreeList> |
| 40 | +
|
| 41 | +@code { |
| 42 | + private List<Employee> TreeListData { get; set; } = new(); |
| 43 | +
|
| 44 | + protected override void OnInitialized() |
| 45 | + { |
| 46 | + for (int i = 1; i <= 1000; i++) |
| 47 | + { |
| 48 | + TreeListData.Add(new Employee() |
| 49 | + { |
| 50 | + Id = i, |
| 51 | + ParentId = i <= 3 ? null : i % 3 + 1, |
| 52 | + FirstName = "First " + i, |
| 53 | + LastName = "Last " + i, |
| 54 | + Position = i <= 3 ? "Team Lead" : "Software Engineer" |
| 55 | + }); |
| 56 | + } |
| 57 | +
|
| 58 | + base.OnInitialized(); |
| 59 | + } |
| 60 | +
|
| 61 | + public class Employee |
| 62 | + { |
| 63 | + public int Id { get; set; } |
| 64 | + public int? ParentId { get; set; } |
| 65 | + public string FirstName { get; set; } |
| 66 | + public string LastName { get; set; } |
| 67 | + public string Position { get; set; } |
| 68 | + } |
| 69 | +} |
| 70 | +```` |
| 71 | + |
| 72 | +## Notes |
| 73 | + |
| 74 | +There are several things to keep in mind when using virtual scrolling: |
| 75 | + |
| 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). |
| 77 | + |
| 78 | + * 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. |
| 79 | + |
| 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. |
| 81 | + |
| 82 | + * The `RowHeight` must not change at runtime, because the new dimensions will cause issues with the scrolling logic. |
| 83 | + |
| 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. |
| 85 | + |
| 86 | +* Do not mix virtualization with paging, as they are alternatives to the same feature. |
| 87 | + |
| 88 | +* 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`. |
| 89 | + |
| 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. |
| 91 | + |
| 92 | +## See Also |
| 93 | + |
| 94 | + * [Live Demo: TreeList Virtual Scrolling](https://demos.telerik.com/blazor-ui/treelist/virtual-scrolling) |
| 95 | + |
0 commit comments