fix: Scroll on Virtualized data in FluentDataGrid falls in infinite rendering loop

[svetovid]

🐛 Bug Report

Scroll on Virtualized data in FluentDataGrid falls in infinite rendering loop.

When I as a user scroll up and down aggressively in the FluentDataGrid control, rendering breaks down and looks like on the image (often flickering).

Chrome inspect tool on "Elements" tab goes crazy.

💻 Repro or Code Sample

<FluentDataGrid Items=@FilteredItems
                            Virtualize="true"
...

FilteredItems is a list property containing POCO items with 2 string properties
The size of the list is about 600 items

public record CultureDataItem(string Name, string DisplayName);

private string m_NameFilter = string.Empty;
    
public IQueryable<CultureDataItem> Content { get; set; } = CultureInfo.GetCultures(CultureTypes.SpecificCultures).Select(x => new CultureDataItem(x.Name, x.DisplayName)).AsQueryable();

private IQueryable<CultureDataItem>? FilteredItems
    => Content.Where(x => x.DisplayName.Contains(m_NameFilter, StringComparison.OrdinalIgnoreCase));

🤔 Expected Behavior

Data loads quicker and renders smoother

😯 Current Behavior

It gets stuck on rendering FluentDataGrid items while scrolling, when Virtualization is enabled

🌍 Your Environment

An app running in WebView2 control
WebView2 127.0.2651.86
.NET 8.0.11
Microsoft.FluentUI.AspNetCore.Components 4.11.7

[vnbaaij]

You say it gets stuck during scrolling. But does it 'recover' and shows the end result after scrolling is stopped?

We can't (and won't) look at this without ready to run reproduction code. Also some more details please on the project setup. Server/Wasm, rendermodes, etc

Standard reply follows...

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.

[svetovid]

Hi @vnbaaij ,

Please, check this project

100% reproducible while using mouse wheel for scrolling

Thanks in advance

[vpetit-reimagine]

We are also facing the same issue with one of our projects, and I was planning to also give you an example, but I can't make a smaller case to reproduce exactly the same issue.

However, attached you will find an example where the scrolling acts strangely:

• it takes quite some time to render some rows if you are fast, sometimes even "losing" track of where actually it is on the list (the scrolling bar jumps)
• if you scroll horizontally to the right of the screen and start scrolling vertically, it doesn't work after a while

So far, I think it might be related to the intensive use of @if (_columns.Contains("ColumnName") (here we assume that the end-user can control the visibility of the columns), if we do not have this extensive use of if, the scrolling seems to get back to normal.

On our project, we also have a lot of FluentDropZone (basically one per cell), which can potentially also impact the scrolling.

FluentUiDataGridDemo.zip

Hope this will also start giving an idea of where to look for to resolve the scrolling issues.

[vnbaaij]

@svetovid Thanks, that helps. I am able to reproduce the error.

It is caused by the ItemSize not being applied to the cells. That puts the Virtualize in a unstable state. Looking for a solution...

[vnbaaij]

Ok, will be fixed in next release. See PR mentioned above