From 2d84cf5e7455b203a2b4d8c21925942a25ed03d9 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 12 Jun 2020 14:18:03 +0300 Subject: [PATCH 1/3] kb(grid): Troubleshooting of the Virtual Scrolling feature of the Grid --- .../grid-virtual-scrolling-troubleshooting.md | 39 ++++++++++++++++++ .../virtual-scrolling-loading-indicator.png | Bin 0 -> 17869 bytes 2 files changed, 39 insertions(+) create mode 100644 knowledge-base/grid-virtual-scrolling-troubleshooting.md create mode 100644 knowledge-base/images/virtual-scrolling-loading-indicator.png diff --git a/knowledge-base/grid-virtual-scrolling-troubleshooting.md b/knowledge-base/grid-virtual-scrolling-troubleshooting.md new file mode 100644 index 0000000000..ce1ee6a65c --- /dev/null +++ b/knowledge-base/grid-virtual-scrolling-troubleshooting.md @@ -0,0 +1,39 @@ +--- +title: Virtual Scrolling - Troubleshooting +description: Troubleshoot errors when Virtual Scrolling is enabled +type: troubleshooting +page_title: Virtual Scrolling - Troubleshooting +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. + + +![](images/virtual-scrolling-loading-indicator.png) + + +## Cause\Possible Cause(s) + +There are several possible causes to that behavior: +* The rendered row height in the browser is larger than 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 can cause the browser to render with unexpected dimensions and / or non-integer values of the ``. + + +## Solution +Set the `RowHeight` parameter to a fixed value in pixels so that it accommodates the content (depending on the padding, margins, font-size and etc. Theme and CSS related rules) and matches the monitor and browser settings. 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 0000000000000000000000000000000000000000..477de7b77baac1fb69ff0fff6d53c54ae914eb4e GIT binary patch literal 17869 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 literal 0 HcmV?d00001 From 44266ae45c7bbc14bb6f490013c58f89451d8093 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 12 Jun 2020 14:37:36 +0300 Subject: [PATCH 2/3] chore(grid): updated virtual row troubleshooting article --- .../grid-virtual-scrolling-troubleshooting.md | 52 +++++++++++++++++- .../virtual-scrolling-loading-indicator.png | Bin 17869 -> 12292 bytes 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/knowledge-base/grid-virtual-scrolling-troubleshooting.md b/knowledge-base/grid-virtual-scrolling-troubleshooting.md index ce1ee6a65c..f6e8ebeb28 100644 --- a/knowledge-base/grid-virtual-scrolling-troubleshooting.md +++ b/knowledge-base/grid-virtual-scrolling-troubleshooting.md @@ -32,7 +32,57 @@ I have a Grid with [Virtual Scrolling]({%slug components/grid/virtual-scrolling% There are several possible causes to that behavior: * The rendered row height in the browser is larger than 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 can cause the browser to render with unexpected dimensions and / or non-integer values of the ``. +* 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 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 diff --git a/knowledge-base/images/virtual-scrolling-loading-indicator.png b/knowledge-base/images/virtual-scrolling-loading-indicator.png index 477de7b77baac1fb69ff0fff6d53c54ae914eb4e..be89a9f343fc933d33cacc9ddba294e328120c04 100644 GIT binary patch literal 12292 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 literal 17869 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 From 9460b3a51acf97d7351ecd6b007ae91910f0e177 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 12 Jun 2020 17:46:56 +0300 Subject: [PATCH 3/3] chore(kb): grid virtual scrolling kb optimizations --- ... => grid-virtual-scrolling-not-working.md} | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) rename knowledge-base/{grid-virtual-scrolling-troubleshooting.md => grid-virtual-scrolling-not-working.md} (71%) diff --git a/knowledge-base/grid-virtual-scrolling-troubleshooting.md b/knowledge-base/grid-virtual-scrolling-not-working.md similarity index 71% rename from knowledge-base/grid-virtual-scrolling-troubleshooting.md rename to knowledge-base/grid-virtual-scrolling-not-working.md index f6e8ebeb28..cc45b5b856 100644 --- a/knowledge-base/grid-virtual-scrolling-troubleshooting.md +++ b/knowledge-base/grid-virtual-scrolling-not-working.md @@ -1,8 +1,8 @@ --- -title: Virtual Scrolling - Troubleshooting -description: Troubleshoot errors when Virtual Scrolling is enabled +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 - Troubleshooting +page_title: Virtual Scrolling - Not Working slug: grid-kb-virtual-scrolling-troubleshooting position: tags: @@ -23,16 +23,20 @@ res_type: kb ## 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 possible causes to that behavior: -* The rendered row height in the browser is larger than 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. +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 with unexpected dimensions and / or non-integer values of the ``. + +* 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 @@ -41,8 +45,11 @@ There are several possible causes to that behavior: + Height="480px" + + RowHeight="20" + + PageSize="20" Sortable="true" FilterMode="@GridFilterMode.FilterMenu"> @@ -86,4 +93,6 @@ There are several possible causes to that behavior: ## Solution -Set the `RowHeight` parameter to a fixed value in pixels so that it accommodates the content (depending on the padding, margins, font-size and etc. Theme and CSS related rules) and matches the monitor and browser settings. +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%}).