fix: FluentDataGrid starts to flicker on large datasets

[StefanJansson]

🐛 Bug Report

With larger rowcounts in dataset, the FluentDataGrid ui starts a rerendering loop or something, the grid is flickering forever.

💻 Repro or Code Sample

I've provided a sample code and on my machine this behavior occurs between 430k and 440k rows.

🤔 Expected Behavior

Datagrid should be able to handle larger datasets.

😯 Current Behavior

On my pc, FluentDataGrid shows this behavior above 430k rows

💁 Possible Solution

🔦 Context

FluentDataGrid cannot be used on larger datasets.

FluentDataGridIssue.zip

🌍 Your Environment

Win11, Edge and VS2022. Everything updated to the latest

[StefanJansson]

Here's an output on the console that shows some behavior on requesting same data multiple times when I hit 440k row count.

[vnbaaij]

For me, with your code, it just stops rendering the grid at a certain point:

I've copied the code to a new standard Blazor project and tried it with the standard QuickGrid and I'm seeing the same behaviour there:

It happens only at a later point in going through the data. But as it is also happening there, I'm suspecting the Virtualize component to be the cause of this.

I think it would be best to open an issue in the aspnetcore repo for this

[StefanJansson]

If I in my environment starts with 440k entries and try to scroll down by clicking the arrow, the behavior is showing.

So you think the problem isn't within Microsoft.FluentUI.AspNetCore.Components but AspNetCore instead? If so, will you escalate it?

[vnbaaij]

Yes, it think it is in AspNetCore itself.

If you add a new standard Blazor Web App (Server/per page) project to the solution you shared and add the below code to the homepage, you should be able to observe the same issue (although most probably at a different location in the scrolling process).

@page "/"
@using Microsoft.AspNetCore.Components.QuickGrid
@rendermode @(new InteractiveServerRenderMode(false))

<PageTitle>Home</PageTitle>

<h1>Working QuickGrid</h1>

<InputNumber @bind-Value="@RowCount" @bind-Value:after="RefreshGrid"  />
<div style="height: 400px; max-width: 800px; overflow-y: scroll;">
    <QuickGrid @ref="grid" ItemsProvider="SampleProvider" Virtualize="true" ItemSize="32" TGridItem="SampleGridData">
        <ChildContent>
            <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
            <PropertyColumn Property="@(c => c.Item2)" />
            <PropertyColumn Property="@(c => c.Item3)" Align="Align.Center" />
            <PropertyColumn Property="@(c => c.Item4)" Align="Align.End" />
        </ChildContent>
    </QuickGrid>
</div>

@code {
    QuickGrid<SampleGridData>? grid;
    public record SampleGridData(string Item1, string Item2, string Item3, string Item4);
    private int RowCount = 430_000;

    private ValueTask<GridItemsProviderResult<SampleGridData>> SampleProvider(GridItemsProviderRequest<SampleGridData> request)
    {
        Console.WriteLine($"RowCount: {RowCount}, request.StartIndex: {request.StartIndex}, request.Count: {request.Count}");

        var data = new List<SampleGridData>();

        if (request.Count != null)
        {
            for (var i = request.StartIndex; i < request.StartIndex + request.Count; i++)
            {
                data.Add(new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4"));
            }
        }

        var result = GridItemsProviderResult.From<SampleGridData>(
            items: data, // Lägg till ToList()
            totalItemCount: RowCount);
        Console.WriteLine($"request complete: {data.Count} rows");

        return new ValueTask<GridItemsProviderResult<SampleGridData>>(result);
    }

    private async Task RefreshGrid()
    {
        await grid!.RefreshDataAsync();
    }

}

[vnbaaij]

If so, will you escalate it?

Let's first see if you can recreate the issue with standard Blazor as well. If so, we can determine next steps

[StefanJansson]

I haven't been able to reproduce it with quickgrid, even though I started with 1M rows

[vnbaaij]

That is weird. You can clearly see it going off the rails in the screenshot I posted. Are you sing the same code I posted? Or something different?

Have you tried just moving the scroll bar almost all the way down to the end in a quick motion?

[StefanJansson]

Yes, scrolling with the arrow buttons, mouse wheel and dragging and clicking the scroll bar creates no problem. But, if I drag the scrollbar to the end, it fails.

[vnbaaij]

With the standard Blazor code? If yes, that shows it is a Blazor /Virtualize issue, I believe.

[StefanJansson]

Strange, now I managed to force the errors without any problems. I agree that the issue is not withing this package

Recording.2025-04-17.080519.mp4