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?

[Rocky-25]

Running in chrome without extensions still shows the violations. It also shows them in Edge.

The site is running locally, but also seeing it when published to azure.

Chrome (extensions disabled)

Edge

[rpodevns]

I still cannot reproduce the error on my end. Try Chrome in Incognito mode.

[Rocky-25]

Still happens in Incognito mode.

[rpodevns]

Can you try with a new project ( no custom datagrid and no mud blazor). Need to rule out all other possibilities.

[Rocky-25]

This is how the projected started. The other pages came later to compare.

[rpodevns]

Sorry... I cannot replicate the issue with the information you've provided. There must be something else in your project or environment at play. Can you provide a complete project as a repo or zip with all external dependencies removed such as mud blazor.

[Rocky-25]

Can you add some more columns to the grid. It seems it's partly due to the spec of the users machine and setup but eventually it'll show up.

[Rocky-25]

6 columns had to be added on (12th gen i7-12700 with 32gb mem) for it to show up.

[vnbaaij]

Look, while I acknowledge that you are seeing the message, are you actually perceiving slowness?

It is not like we are going to drastically change the way the DataGrid is working/rendering. The grid is far too complex for that and we do not have capacity to take that on. Also, we have not received any other complaints about it being (too) slow.
With things like Virtualize or pagination, grids with large datasets can be managed quite efficiently, I believe.

I'm not sure or clear what you want us to do with this report.

[Rocky-25]

Yes it is very noticeable to the user that it's slow.

[vnbaaij]

Are you seeing it with any of the demos on our site as well?

[Rocky-25]

No because your demo for the select column has 6 rows and 3 columns.

[vnbaaij]

And if you expand on that specific demo in your setup? Because if I change the sample to 6 columns and use your data as base, I still don't get any console messages:

As said, I'm not sure or clear what you want us to do with this. Do you expect us to keep trying?

[Rocky-25]

Change this to be verbose. Default levels isn't enough.

[vnbaaij]

Even then it does not show any messages and, more importantly, it does not act or feel slow.

[rpodevns]

I can see the issue with this code using 100 rows and 8 columns but only if I choose 20x slowdown.

<PageTitle>Data Grid</PageTitle>

<h1>Data Grid</h1>

<FluentDataGrid Items="@Items.AsQueryable()" ShowHover="true" TGridItem="DataRow">
    <SelectColumn TGridItem="DataRow"
    SelectMode="DataGridSelectMode.Multiple"
    SelectFromEntireRow="false"
    @bind-SelectedItems="@SelectedItems"/>
    <PropertyColumn Width="100px" Property="@(p => p.Id)" Title="ID" />
    <PropertyColumn Width="300px" Property="@(p => p.Column1)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column2)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column3)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column4)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column5)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column6)" />
    <PropertyColumn Width="300px" Property="@(p => p.Column7)" />

</FluentDataGrid>

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


@code {

    IEnumerable<DataRow> SelectedItems = [];
    List<DataRow> Items = [];

    const int ROW_COUNT = 100;

    protected override void OnInitialized()
    {
        Items = GenerateData();
        base.OnInitialized();
    }

    static List<DataRow> GenerateData()
    {
        List<DataRow> data = new List<DataRow>();

        for (int i = 1; i <= ROW_COUNT; i++)
        {
            data.Add(new DataRow
                {
                    Id = i,
                    Column1 = "Column1 Value",
                    Column2 = "Column2 Value",
                    Column3 = "Column3 Value",
                    Column4 = "Column4 Value",
                    Column5 = "Column5 Value",
                    Column6 = "Column6 Value",
                    Column7 = "Column7 Value"
                });
        }

        return data;
    }

    public class DataRow
    {
        public int Id { get; set; }
        public string Column1 { get; set; }
        public string Column2 { get; set; }
        public string Column3 { get; set; }
        public string Column4 { get; set; }
        public string Column5 { get; set; }
        public string Column6 { get; set; }
        public string Column7 { get; set; }
    }

}