Fix tests

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridMultiSelect.razor

@@ -0,0 +1,90 @@
+<FluentStack VerticalAlignment="VerticalAlignment.Center">
+    <FluentSelect Items="@(Enum.GetValues<DataGridSelectMode>())"
+                  @bind-SelectedOption="@Mode" />
+    <FluentCheckbox @bind-Value="@UseSelectedItems"
+                    @bind-Value:after="@(() => ResetSelectItems())"
+                    Label="Use `SelectedItems` property" />
+    <FluentCheckbox @bind-Value="@SelectFromEntireRow"
+                    @bind-Value:after="@(() => ResetSelectItems())"
+                    Label="Use `SelectFromEntireRow` property" />
+    <FluentCheckbox @bind-Value="@SelectableBefore2000"
+                    @bind-Value:after="@(() => ResetSelectItems())"
+                    Label="Use `Selectable` property" />
+</FluentStack>
+
+@if (UseSelectedItems)
+{
+    @* Sample using SelectedItems  *@
+    <div>Using SelectedItems</div>
+
+    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person">
+        <SelectColumn TGridItem="Person"
+                      SelectMode="@Mode"
+                      SelectFromEntireRow="@SelectFromEntireRow"
+                      Selectable="@(e => !SelectableBefore2000 || e.BirthDate.Year >= 2000)"
+                      @bind-SelectedItems="@SelectedItems" />
+        <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
+        <PropertyColumn Width="300px" Property="@(p => p.Name)" />
+        <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+    </FluentDataGrid>
+
+    <div style="margin-top: 0.5rem;">
+        <b>SelectedItems:</b>
+        @String.Join("; ", SelectedItems.Select(p => p.Name))
+    </div>
+}
+else
+{
+    @* Sample using Property and OnSelect  *@
+    <div>Using Property and OnSelect</div>
+
+    <FluentDataGrid Items="@People" ShowHover="@SelectFromEntireRow" TGridItem="Person">
+        <SelectColumn TGridItem="Person"
+                      SelectMode="@Mode"
+                      SelectFromEntireRow="@SelectFromEntireRow"
+                      Selectable="@(e => !SelectableBefore2000 || e.BirthDate.Year >= 2000)"
+                      Property="@(e => e.Selected)"
+                      OnSelect="@(e => e.Item.Selected = e.Selected)"
+                      SelectAll="@(People.All(p => p.Selected))"
+                      SelectAllChanged="@(all => People.ToList().ForEach(p => p.Selected = (all == true)))" />
+        <PropertyColumn Width="100px" Property="@(p => p.PersonId)" Title="ID" />
+        <PropertyColumn Width="300px" Property="@(p => p.Name)" />
+        <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+    </FluentDataGrid>
+
+    <div>
+        <b>Peoples:</b>
+        @String.Join("; ", People.Where(p => p.Selected).Select(p => p.Name))
+    </div>
+}
+
+@code {
+    bool UseSelectedItems = true;
+    bool SelectFromEntireRow = true;
+    bool SelectableBefore2000 = false;
+    DataGridSelectMode Mode = DataGridSelectMode.Single;
+
+    IEnumerable<Person> SelectedItems = People.Where(p => p.Selected);
+
+    record Person(int PersonId, string Name, DateOnly BirthDate)
+    {
+        public bool Selected { get; set; }
+    };
+
+    static IQueryable<Person> People = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)) { Selected = true },
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
+        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
+        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
+    }.AsQueryable();
+
+    private void ResetSelectItems()
+    {
+        People.ToList().ForEach(i => i.Selected = false);
+        People.First().Selected = true;
+        SelectedItems = People.Where(p => p.Selected);
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md

@@ -26,3 +26,5 @@ The resize options UI is using a customized string for the label ('Width (+/- 10
 the custom localizer which is registered in the Server project's `Program.cs` file.
 
 {{ DataGridTypical }}
+
+{{ DataGridMultiSelect }}

src/Core/Components/DataGrid/Columns/SelectColumn.cs

@@ -26,6 +26,8 @@ public class SelectColumn<TGridItem> : ColumnBase<TGridItem>
     private readonly Icon IconUnselectedSingle = new CoreIcons.Regular.Size20.RadioButton().WithColor(Color.Lightweight);
     private readonly Icon IconSelectedSingle = new CoreIcons.Filled.Size20.RadioButton();
 
+    private readonly List<TGridItem> _selectedItems = [];
+
     /// <summary>
     /// Initializes a new instance of <see cref="SelectColumn{TGridItem}"/>.
     /// </summary>
@@ -64,13 +66,13 @@ public SelectColumn()
     /// Gets or sets the list of selected items.
     /// </summary>
     [Parameter]
-    public IList<TGridItem> SelectedItems { get; set; } = [];
+    public IEnumerable<TGridItem> SelectedItems { get; set; } = [];
 
     /// <summary>
     /// Gets or sets a callback when list of selected items changed.
     /// </summary>
     [Parameter]
-    public EventCallback<IList<TGridItem>> SelectedItemsChanged { get; set; }
+    public EventCallback<IEnumerable<TGridItem>> SelectedItemsChanged { get; set; }
 
     /// <summary>
     /// Gets or sets the selection mode (Single, SingleSticky or Multiple).
@@ -175,7 +177,9 @@ public SelectColumn()
     /// </summary>
     public void ClearSelection()
     {
-        SelectedItems?.Clear();
+        _selectedItems.Clear();
+        SelectedItems = _selectedItems;
+
         RefreshHeaderContent();
     }
 
@@ -254,6 +258,18 @@ protected internal override Task OnCellKeyDownAsync(FluentDataGridCell<TGridItem
         return Task.CompletedTask;
     }
 
+    //private void UpdateSelectedItems(IEnumerable<TGridItem> value)
+    //{
+    //    if (_selectedItems != value)
+    //    {
+    //        _selectedItems.Clear();
+    //        _selectedItems.AddRange(value);
+    //        SelectAll = false;
+
+    //        SelectedItems = _selectedItems;
+    //    }
+    //}
+
     /// <summary />
     private async Task AddOrRemoveSelectedItemAsync(TGridItem? item)
     {
@@ -264,7 +280,7 @@ private async Task AddOrRemoveSelectedItemAsync(TGridItem? item)
                 return;
             }
 
-            if (SelectedItems.Remove(item))
+            if (_selectedItems.Remove(item))
             {
                 SelectAll = false;
                 await CallOnSelectAsync(item, isSelected: false);
@@ -278,13 +294,14 @@ private async Task AddOrRemoveSelectedItemAsync(TGridItem? item)
                         await CallOnSelectAsync(previous, isSelected: false);
                     }
 
-                    SelectedItems.Clear();
+                    _selectedItems.Clear();
                 }
 
-                SelectedItems.Add(item);
+                _selectedItems.Add(item);
                 await CallOnSelectAsync(item, isSelected: true);
             }
 
+            SelectedItems = _selectedItems;
             if (SelectedItemsChanged.HasDelegate)
             {
                 await SelectedItemsChanged.InvokeAsync(SelectedItems);
@@ -363,14 +380,20 @@ private RenderFragment<TGridItem> GetDefaultChildContent()
             var selected = SelectedItems.Contains(item) || Property.Invoke(item);
 
             // Sync with SelectedItems list
-            if (selected && !SelectedItems.Contains(item))
+            if (selected && !_selectedItems.Contains(item))
             {
-                SelectedItems.Add(item);
+                _selectedItems.Add(item);
                 RefreshHeaderContent();
             }
-            else if (!selected && SelectedItems.Contains(item))
+            else if (!selected && _selectedItems.Contains(item))
+            {
+                _selectedItems.Remove(item);
+            }
+
+            SelectedItems = _selectedItems;
+            if (SelectedItemsChanged.HasDelegate)
             {
-                SelectedItems.Remove(item);
+                _ = SelectedItemsChanged.InvokeAsync(SelectedItems);
             }
 
             builder.OpenComponent<FluentIcon<Icon>>(0);
@@ -462,7 +485,7 @@ private void RefreshHeaderContent()
                 return false;
             }
 
-            if (SelectedItems.Count == InternalGridContext.TotalItemCount || SelectAll == true)
+            if (SelectedItems.Take(InternalGridContext.TotalItemCount + 1).Count() == InternalGridContext.TotalItemCount || SelectAll == true)
             {
                 return true;
             }
@@ -501,20 +524,21 @@ internal async Task OnClickAllAsync(MouseEventArgs e)
             await SelectAllChanged.InvokeAsync(SelectAll);
         }
 
-        var count = SelectedItems.Count;
+        var count = SelectedItems.Count();
         // SelectedItems
-        SelectedItems.Clear();
+        _selectedItems.Clear();
         if (SelectAll == true && count != InternalGridContext.TotalItemCount)
         {
             // Only add selectable items
-            _ = SelectedItems.Concat((InternalGridContext.Grid.Items?.ToList() ?? InternalGridContext.Items)
+            _selectedItems.AddRange((InternalGridContext.Grid.Items?.ToList() ?? InternalGridContext.Items)
                 .Where(item => Selectable?.Invoke(item) ?? true)
             );
         }
 
+        SelectedItems = _selectedItems;
         if (SelectedItemsChanged.HasDelegate)
         {
-            await SelectedItemsChanged.InvokeAsync(SelectedItems);
+            await SelectedItemsChanged.InvokeAsync(_selectedItems);
         }
 
         RefreshHeaderContent();

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -898,7 +898,7 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
              ? (_sortByAscending ? "ascending" : "descending")
              : "none";
 
-    private string? StyleValue => new StyleBuilder(Style)
+    private string? StyleValue => DefaultStyleBuilder
         .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("grid-template-rows", "auto 1fr", (_internalGridContext.Items.Count == 0 || Items is null || EffectiveLoadingValue) && DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("height", "100%", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue)
@@ -918,7 +918,7 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
 
     private string? GridClass()
     {
-        return new CssBuilder(Class)
+        return DefaultClassBuilder
             .AddClass("fluent-data-grid")
             .AddClass("grid", DisplayMode == DataGridDisplayMode.Grid)
             .AddClass("auto-fit", AutoFit)

src/Core/Components/DataGrid/FluentDataGridCell.razor

@@ -4,7 +4,8 @@
 
 @if (CellType == DataGridCellType.Default)
 {
-    <td col-index=@GridColumn
+    <td id="@Id"
+        col-index=@GridColumn
         class="@ClassValue"
         style="@StyleValue"
         role="gridcell"
@@ -18,7 +19,8 @@
 }
 else
 {
-    <th col-index=@GridColumn
+    <th id="@Id"
+        col-index=@GridColumn
         class="@ClassValue"
         style="@StyleValue"
         @oncontextmenu:preventDefault="true"

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -6,7 +6,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
-using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -70,15 +69,15 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati
     protected FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
     /// <summary />
-    protected string? ClassValue => new CssBuilder(Class)
+    protected string? ClassValue => DefaultClassBuilder
         .AddClass("column-header", when: CellType == DataGridCellType.ColumnHeader)
         .AddClass("select-all", when: CellType == DataGridCellType.ColumnHeader && Column is SelectColumn<TGridItem>)
         .AddClass("multiline-text", when: Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null) && CellType != DataGridCellType.ColumnHeader)
         .AddClass(Owner.Class)
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder(Style)
+    protected string? StyleValue => DefaultStyleBuilder
         .AddStyle("grid-column", GridColumn.ToString(CultureInfo.InvariantCulture), () => !Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null) && Grid.DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("text-align", "center", Column is SelectColumn<TGridItem>)
         .AddStyle("align-content", "center", Column is SelectColumn<TGridItem>)

src/Core/Components/DataGrid/FluentDataGridRow.razor

@@ -4,7 +4,8 @@
 @typeparam TGridItem
 @attribute [CascadingTypeParameter(nameof(TGridItem))]
 <CascadingValue Value="this" Name="OwningRow">
-    <tr class="@ClassValue"
+    <tr id="@Id"
+        class="@ClassValue"
         style="@StyleValue"
         data-row-index=@RowIndex
         role="row"

src/Core/Components/DataGrid/FluentDataGridRow.razor.cs

@@ -6,7 +6,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
-using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -84,13 +83,13 @@ public FluentDataGridRow(LibraryConfiguration configuration) : base(configuratio
     protected FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
     /// <summary />
-    protected string? ClassValue => new CssBuilder(Class)
+    protected string? ClassValue => DefaultClassBuilder
         .AddClass("fluent-data-grid-row")
         .AddClass("hover", when: Grid.ShowHover)
         .Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder(Style)
+    protected string? StyleValue => DefaultStyleBuilder
        .Build();
 
     /// <summary>

tests/Core/Components/Base/ComponentBaseTests.cs

@@ -8,6 +8,7 @@
 using Bunit;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
 using Microsoft.JSInterop;
 using Xunit;
 
@@ -40,6 +41,11 @@ public class ComponentBaseTests : Bunit.TestContext
         { typeof(FluentHighlighter), Loader.Default.WithRequiredParameter("HighlightedText", "AB").WithRequiredParameter("Text", "ABCDEF")},
         { typeof(FluentKeyCode), Loader.Default.WithRequiredParameter("ChildContent", (RenderFragment)(builder => builder.AddContent(0, "MyContent"))) },
         { typeof(FluentPaginator), Loader.Default.WithRequiredParameter("State", new PaginationState()) },
+        { typeof(FluentDataGrid<>), Loader.MakeGenericType(typeof(string)) },
+        { typeof(FluentDataGridRow<>), Loader.MakeGenericType(typeof(string)).WithCascadingValue(new InternalGridContext<string>(new FluentDataGrid<string>(new LibraryConfiguration()))) },
+        { typeof(FluentDataGridCell<>), Loader.MakeGenericType(typeof(string))
+                                       .WithCascadingValue(new InternalGridContext<string>(new FluentDataGrid<string>(new LibraryConfiguration())))
+                                       .WithCascadingValue("OwningRow", new FluentDataGridRow<string>(new LibraryConfiguration()) { InternalGridContext = new InternalGridContext<string>(new FluentDataGrid<string>(new LibraryConfiguration())) }) },
     };
 
     /// <summary />