fix: DataGrid SelectColumn slow with more data and more columns

[Rocky-25]

🐛 Bug Report

When using the SelectColumn with more than a few records in the grid the response time of the select box slows down. The more columns or the more rows the slower it gets.

Chrome reports [Violation] 'click' handler took 155ms for the below code. With my real world data this is over 600ms.

💻 Repro or Code Sample

Based off your sample but with more records and an extra column.

@page "/data-grid"

<PageTitle>Data Grid</PageTitle>

<h1>Data Grid</h1>

<FluentDataGrid Items="@People" ShowHover="true" TGridItem="Person">
    <SelectColumn TGridItem="Person"
                  SelectMode="DataGridSelectMode.Multiple"
                  SelectFromEntireRow="false"
                  @bind-SelectedItems="@SelectedItems" />
    <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
    <PropertyColumn Width="300px" Property="@(p => p.Name)" />
    <PropertyColumn Width="300px" Property="@(p => p.HairColour)" />
    <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</FluentDataGrid>

<div>
    <b>SelectedItems:</b>
    @String.Join("; ", SelectedItems.Select(p => p.Name))
</div>


@code {
    IEnumerable<Person> SelectedItems = People.Where(p => p.IsSelected);

    record Person(int PersonId, string Name, DateOnly BirthDate, string HairColour)
    {
        public bool IsSelected { get; set; }
    };

    static IQueryable<Person> People = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16),"Brown"){IsSelected=true},
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1),"Black"),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10),"Blonde"),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27),"Ginger"),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3),"Bald"),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9),"Grey"),

        new Person(20895, "2 Jean Martin", new DateOnly(1985, 3, 16),"Brown"),
        new Person(20944, "2 António Langa", new DateOnly(1991, 12, 1),"Brown"),
        new Person(21203, "2 Julie Smith", new DateOnly(1958, 10, 10),"Brown"),
        new Person(21205, "2 Nur Sari", new DateOnly(1922, 4, 27),"Blonde"),
        new Person(21898, "2 Jose Hernandez", new DateOnly(2011, 5, 3),"Black"),
        new Person(22130, "2 Kenji Sato", new DateOnly(2004, 1, 9),"Ginger"),

        new Person(30895, "3 Jean Martin", new DateOnly(1985, 3, 16),"Black"),
        new Person(30944, "3 António Langa", new DateOnly(1991, 12, 1),"Brown"),
        new Person(31203, "3 Julie Smith", new DateOnly(1958, 10, 10),"Blonde"),
        new Person(31205, "3 Nur Sari", new DateOnly(1922, 4, 27),"Brown"),
        new Person(31898, "3 Jose Hernandez", new DateOnly(2011, 5, 3),"Grey"),
        new Person(32130, "3 Kenji Sato", new DateOnly(2004, 1, 9),"Ginger"),

        new Person(40895, "4 Jean Martin", new DateOnly(1985, 3, 16),"Black"),
        new Person(40944, "4 António Langa", new DateOnly(1991, 12, 1),"Brown"),
        new Person(41203, "4 Julie Smith", new DateOnly(1958, 10, 10),"Bald"),
        new Person(41205, "4 Nur Sari", new DateOnly(1922, 4, 27),"Ginger"),
        new Person(41898, "4 Jose Hernandez", new DateOnly(2011, 5, 3),"Brown"),
        new Person(42130, "4 Kenji Sato", new DateOnly(2004, 1, 9),"Blonde"),

        new Person(50895, "5 Jean Martin", new DateOnly(1985, 3, 16),"Ginger"),
        new Person(50944, "5 António Langa", new DateOnly(1991, 12, 1),"Brown"),
        new Person(51203, "5 Julie Smith", new DateOnly(1958, 10, 10),"Blonde"),
        new Person(51205, "5 Nur Sari", new DateOnly(1922, 4, 27),"Brown"),
        new Person(51898, "5 Jose Hernandez", new DateOnly(2011, 5, 3),"Black"),
        new Person(52130, "5 Kenji Sato", new DateOnly(2004, 1, 9),"Grey"),

        new Person(60895, "6 Jean Martin", new DateOnly(1985, 3, 16),"Blonde"),
        new Person(60944, "6 António Langa", new DateOnly(1991, 12, 1),"Black"),
        new Person(61203, "6 Julie Smith", new DateOnly(1958, 10, 10),"Grey"),
        new Person(61205, "6 Nur Sari", new DateOnly(1922, 4, 27),"Grey"),
        new Person(61898, "6 Jose Hernandez", new DateOnly(2011, 5, 3),"Brown"),
        new Person(62130, "6 Kenji Sato", new DateOnly(2004, 1, 9),"Brown"),
    }.AsQueryable();
}

🤔 Expected Behavior

Responsive and snappy response. No timing violations.

🔦 Context

Using a grid with SelectColumn with real world amounts of data and columns is noticeably slow for the user.

🌍 Your Environment

• OS & Device: Windows 10 Pro
• Browser: Google Chrome
• .NET 8 and Fluent UI Blazor library Version 4.11.3

[vnbaaij]

Can you show/tell how that violation can be seen?

With the example you posted, I do not see any significant slowdown occurring in selecting rows.

How many rows do you have in your real world data? And if it is a pretty big number (>100), are you using Virtualization? And if not, why not?

[Rocky-25]

It's shown in Chrome developer tools console.

The row count in our real world data is 64 and 7 columns so not massive.

[rpodevns]

I do not see violations reported in Chrome when testing the sample code.

Try running Chrome without extensions.

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-extensions

What render mode and can you provide a screenshot of the violations.

Test with another Chromium-based browser like Edge.

Is the site running locally or published?