diff --git a/knowledge-base/grid-virtual-scrolling-not-working.md b/knowledge-base/grid-virtual-scrolling-not-working.md new file mode 100644 index 0000000000..cc45b5b856 --- /dev/null +++ b/knowledge-base/grid-virtual-scrolling-not-working.md @@ -0,0 +1,98 @@ +--- +title: Virtual Scrolling Does Not Work +description: How to fix Virtual Scrolling does not work and does not load data +type: troubleshooting +page_title: Virtual Scrolling - Not Working +slug: grid-kb-virtual-scrolling-troubleshooting +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ + +## Description +I have a Grid with [Virtual Scrolling]({%slug components/grid/virtual-scrolling%}) enabled. When I scroll up or down the rows for the current view port are not rendered as the loading indicator remains visible as shown in the image below. + +>caption A depiction of the problem and symptom + +![](images/virtual-scrolling-loading-indicator.png) + + +## Cause\Possible Cause(s) + +There are several common causes for that behavior: + +* The rendered row height in the browser does not match the value set to the `RowHeight` parameter of the Grid. This depends on the used Theme and / or custom CSS rules applied to the `` HTML tag. + +* The `RowHeight` parameter changes on runtime. Changing the height of the row dynamically depending on the content will cause issues with the virtualization logic. + +* The browser and monitor settings do not match the settings of the Grid. Different browser zoom levels and monitor DPI (not set to 100%) can cause the browser to render the rows with unexpected dimensions and / or non-integer values of the ``. + +>caption Typical PROBLEMATIC example when using Virtual Scrolling + +````CSHTML +@*This example showcases typical situation when the Virtual Scrolling will break*@ + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + protected override async Task OnInitializedAsync() + { + GridData = await GetData(); + } + + private async Task> GetData() + { + return Enumerable.Range(1, 1000).Select(x => new SampleData + { + Id = x, + Name = $"name {x}", + LastName = $"Surname {x}", + HireDate = DateTime.Now.Date.AddDays(-x) + }).ToList(); + } + + public class SampleData + { + public int Id { get; set; } + public string Name { get; set; } + public string LastName { get; set; } + public DateTime HireDate { get; set; } + } +} +```` + + +## Solution +Set the `RowHeight` parameter to a fixed value in pixels so that it accommodates the content (depending on the content, padding, margins, font-size and other rules and settings on your app such the Theme and CSS related rules) and matches the monitor and browser settings. + +You can read more in the [Notes section of the Virtual Scrolling article]({%slug components/grid/virtual-scrolling%}). diff --git a/knowledge-base/images/virtual-scrolling-loading-indicator.png b/knowledge-base/images/virtual-scrolling-loading-indicator.png new file mode 100644 index 0000000000..be89a9f343 Binary files /dev/null and b/knowledge-base/images/virtual-scrolling-loading-indicator.png differ