DataGrid Select Column

[Rocky-25]

🐛 Bug Report

When using the SelectColumn with SelectMode multiple, if you have selected items within code, the checkbox in the header should be filled as some rows are selected but it's empty and the hover over says "no rows are selected"

💻 Repro or Code Sample

@page "/data-grid"

<PageTitle>Data Grid</PageTitle>

<h1>Data Grid</h1>

<FluentDataGrid Items="@People"
                ShowHover="true"
                TGridItem="Person"
                GenerateHeader="GenerateHeaderOption.Sticky"
                RowSize="DataGridRowSize.Small"
                Virtualize=false
                ItemSize="32"
                ResizableColumns=true
                GridTemplateColumns="50px auto auto auto auto">

    <SelectColumn TGridItem="Person"
                  SelectMode="DataGridSelectMode.Multiple"
                  Property="@(e=> e.IsSelected)"
                  OnSelect="@(e => e.Item.IsSelected = e.Selected)"
                  SelectAll="@(People.All(p => p.IsSelected))"
                  SelectAllChanged="@(all => People.ToList().ForEach(p => p.IsSelected = (all == true)))" />

    <PropertyColumn Property="@(p => p.PersonId)" Title="ID" />
    <PropertyColumn Property="@(p => p.Name)" />
    <PropertyColumn Property="@(p => p.HairColour)" />
    <PropertyColumn 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"),
    }.AsQueryable();
}

🤔 Expected Behavior

Header checkbox in correct state.

😯 Current Behavior

It's not in correct state.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Chrome
• .NET 10 and Fluent UI Blazor library Version 4.13.1

[vnbaaij]

We need to look into this more.

For now, use the SelectedItems property as shown on the demo site: https://www.fluentui-blazor.net/datagrid-multi-select

[Greexter]

It looks like there are two issues here. First is in the sample itself , because the SelectAll will not evaluate to an indeterminate state but only to true/false (this code is also used on the selection demo page with Use SelectedItems unchecked).

Using the following instead should work, but it still does not:

public bool? AllSelected()
{
    var selectedCount = People.Count(p => p.IsSelected);
    if (selectedCount == 0)
        return false;

    return selectedCount == People.Count() ? true : null;
}

It is because internally SelectColumn always uses its's own selected items collection to determine if everything is selected. I am not sure why it does not use the value of parameter SelectedAll, but this way it is not possible to control the checkbox from outside without using SelectedItems I think. Would it perhaps be possible to modify it to rely on the parameter to fix this issue?