fix: [DataGrid] The Select All checkbox for a SelectColumn stops working after reloading data for a data grid, when the Virtualize parameter is set

[Stephen-Lamb]

🐛 Bug Report

The Select All checkbox for a SelectColumn in a data grid stops working (no longer checks row checkboxes) after reloading data for the data grid, when the Virtualize parameter is also set for the grid.

💻 Repro or Code Sample

• I created a new project in Visual Studio using the Fluent Blazor Web App template, then set Interactive render mode to Server and Interactivity location to Global.
• I then modified the weather page to add a multi-select column to the data grid, added a button to reload the items for the data grid, and also set Virtualize to true on the data grid (this seems to be important, if I don't set the Virtualize parameter on the grid then I don't get the problem).
• Initially the 'select all' button on the grid header works correctly. However after I press the "Reload" button to reload data for the grid, checking the select all button no longer checks any of the row checkboxes in the grid.

@page "/weather"

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

<FluentButton OnClick="LoadGridAsync">Reload</FluentButton>

<FluentDataGrid Virtualize="true" Items=@items GridTemplateColumns="50px 1fr 1fr 1fr 1fr" TGridItem="WeatherForecast">
    <SelectColumn TGridItem="WeatherForecast" SelectMode="DataGridSelectMode.Multiple" @bind-SelectedItems="@SelectedItems" />
    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align="Align.Start" />
    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align="Align.Center" />
    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align="Align.Center" />
    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="Align.End" />
</FluentDataGrid>

@code {
    public class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }

    IQueryable<WeatherForecast>? items;
    IEnumerable<WeatherForecast> SelectedItems = Enumerable.Empty<WeatherForecast>();

    private async Task<IQueryable<WeatherForecast>> GenerateSampleGridDataAsync(int size)
    {
        // Simulate asynchronous loading to demonstrate a loading indicator
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        List<WeatherForecast> newForecasts = new();
        for (int index = 0; index < size; index++)
        {
            newForecasts.Add(new WeatherForecast
                {
                    Date = startDate.AddDays(index),
                    TemperatureC = Random.Shared.Next(-20, 55),
                    Summary = summaries[Random.Shared.Next(summaries.Length)]
                });
        }
        return newForecasts.AsQueryable();
    }

    protected override async Task OnInitializedAsync()
    {
        await LoadGridAsync();
    }

    private async Task LoadGridAsync()
    {
        SelectedItems = Enumerable.Empty<WeatherForecast>();
        items = await GenerateSampleGridDataAsync(5);
    }
}

🤔 Expected Behavior

Checking/unchecking the Select All checkbox for the Select Column should check/uncheck row checkboxes in the grid.

😯 Current Behavior

After reloading data for a grid with the Virtualize parameter set, checking the Select All checkbox no longer selects any other checkboxes in the grid.

💁 Possible Solution

🔦 Context

We have many data grids in our app, and reloading data for a grid from a backend database is a common occurrence. I would expect the Select All checkbox to continue working after reloading data for a grid.

🌍 Your Environment

• OS & Device: Windows 11 Pro 64-bit on laptop
• Browser: Google Chrome
• .NET 8.0 and Fluent UI Blazor library Version 4.10.3

[dvoituron]

The reason seems to be that the object references are not the same after clicking on the Reload button (of course because the the GenerateSampleGridDataAsync is called).

For example, adding this debug code below the Button:

@(String.Join("; ", SelectedItems.Select(i => i.GetHashCode().ToString())))

And this new column:

<PropertyColumn Title="Hash" Property="@(c => c!.GetHashCode())" />

I need to investigate how to unload the previous object references in this case.

[dvoituron]

I found a solution to fix this. See #2209

[Stephen-Lamb]

Many thanks @dvoituron! I'll give it a test in the next release :-).