[DataGrid] Make SelectColumn work when using ItemsProvider (#2060)

* Fix #2055 by including ItemsProvider in the logic

* Also fix #2053 by excluding SelectColumns from GridTemplateColumns/Width check

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1462,7 +1462,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1.Property">
             <summary>
-            Gets or sets the function to be executed to display the checked/unchecked icon, depending of you data model.
+            Gets or sets the function to executed to determine checked/unchecked status.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1.SortBy">

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1 +1,52 @@
 @page "/IssueTester"
+
+@page "/TestSelectColumns"
+
+<FluentDataGrid ItemsProvider="PersonProvider" ShowHover="true" TGridItem="Person" Pagination="@pagination" GridTemplateColumns="50px 1fr 2fr 1fr">
+    <SelectColumn TGridItem="Person"
+                  SelectMode="DataGridSelectMode.Multiple"
+                  Property="@(e => e.Selected)"
+                  OnSelect="@(e => e.Item.Selected = e.Selected)"
+                  SelectAll="@(PeopleList.All(p => p.Selected))"
+                  SelectAllChanged="@(all => PeopleList.ToList().ForEach(p => p.Selected = (all == true)))" />
+    <PropertyColumn Property="@(p => p.PersonId)" Title="ID" Sortable="true" />
+    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
+    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+</FluentDataGrid>
+<FluentPaginator State="@pagination" />
+
+<div>
+    <b>Peoples:</b>
+    @String.Join("; ", PeopleList.Where(p => p.Selected).Select(p => p.Name))
+</div>
+
+@code {
+    PaginationState pagination { get; set; } = new PaginationState() { ItemsPerPage = 10 };
+
+    public record Person(int PersonId, string Name, DateOnly BirthDate)
+    {
+        public bool Selected { get; set; }
+    };
+
+    public static List<Person> PeopleList = new()
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
+        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)),
+        new Person(10895, "Jean 2 Martin", new DateOnly(1985, 3, 16)),
+        new Person(10944, "António 2 Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie 2 Smith", new DateOnly(1958, 10, 10)),
+        new Person(11205, "Nur 2 Sari", new DateOnly(1922, 4, 27)),
+        new Person(11898, "Jose 2 Hernandez", new DateOnly(2011, 5, 3)),
+        new Person(12130, "Kenji 2 Sato", new DateOnly(2004, 1, 9)),
+    };
+
+    private async ValueTask<GridItemsProviderResult<Person>> PersonProvider(GridItemsProviderRequest<Person> req)
+    {
+        var subList = PeopleList.Skip(req.StartIndex).Take(req.Count ?? PeopleList.Count).ToList();
+        return GridItemsProviderResult.From(subList, PeopleList.Count);
+    }
+}

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

@@ -158,7 +158,7 @@ public DataGridSelectMode SelectMode
     public EventCallback<bool?> SelectAllChanged { get; set; }
 
     /// <summary>
-    /// Gets or sets the function to be executed to display the checked/unchecked icon, depending of you data model.
+    /// Gets or sets the function to executed to determine checked/unchecked status.
     /// </summary>
     [Parameter]
     public Func<TGridItem, bool> Property { get; set; } = (item) => false;
@@ -175,6 +175,7 @@ internal async Task AddOrRemoveSelectedItemAsync(TGridItem? item)
             if (SelectedItems.Contains(item))
             {
                 _selectedItems.Remove(item);
+                SelectAll = false;
                 await CallOnSelect(item, false);
             }
             else
@@ -268,6 +269,7 @@ private RenderFragment<TGridItem> GetDefaultChildContent()
             if (selected && !_selectedItems.Contains(item))
             {
                 _selectedItems.Add(item);
+                RefreshHeaderContent();
             }
             else if (!selected && _selectedItems.Contains(item))
             {
@@ -324,13 +326,13 @@ private void RefreshHeaderContent()
     private bool? GetSelectAll()
     {
         // Using SelectedItems only
-        if (InternalGridContext != null && Grid.Items != null)
+        if (InternalGridContext != null && (Grid.Items != null || Grid.ItemsProvider != null))
         {
             if (!SelectedItems.Any())
             {
                 return false;
             }
-            else if (SelectedItems.Count() == Grid.Items.Count())
+            else if (SelectedItems.Count() == InternalGridContext.TotalItemCount || SelectAll == true)
             {
                 return true;
             }
@@ -361,7 +363,7 @@ protected internal override void CellContent(RenderTreeBuilder builder, TGridIte
     /// <summary />
     internal async Task OnClickAllAsync(MouseEventArgs e)
     {
-        if (Grid == null || Grid.Items == null || SelectMode != DataGridSelectMode.Multiple)
+        if (Grid == null || SelectMode != DataGridSelectMode.Multiple)
         {
             return;
         }
@@ -377,7 +379,7 @@ internal async Task OnClickAllAsync(MouseEventArgs e)
         _selectedItems.Clear();
         if (SelectAll == true)
         {
-            _selectedItems.AddRange(Grid.Items);
+            _selectedItems.AddRange(InternalGridContext.Items);
         }
 
         if (SelectedItemsChanged.HasDelegate)

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -18,7 +18,7 @@
                           grid-template-columns=@_internalGridTemplateColumns
                           class="@GridClass()"
                           style="@Style"
-                          aria-rowcount="@(_ariaBodyRowCount + 1)"
+                          aria-rowcount="@(_internalGridContext.TotalItemCount + 1)"
                           @onrowfocus=HandleOnRowFocusAsync
                           @onclosecolumnoptions="CloseColumnOptions"
                           @attributes="AdditionalAttributes">
@@ -40,7 +40,7 @@
             {
                 @if (Virtualize)
                 {
-                    if (_ariaBodyRowCount == 0)
+                    if (_internalGridContext.TotalItemCount == 0)
                     {
                         @_renderEmptyContent
                     }
@@ -72,10 +72,10 @@
     {
         var initialRowIndex = (GenerateHeader != GenerateHeaderOption.None) ? 2 : 1; // aria-rowindex is 1-based, plus 1 if there is a header
         var rowIndex = initialRowIndex;
-        if (_currentNonVirtualizedViewItems.Any())
+        if (_internalGridContext.Items.Any())
         {
             Loading = false;
-            foreach (var item in _currentNonVirtualizedViewItems)
+            foreach (var item in _internalGridContext.Items)
             {
                 RenderRow(__builder, rowIndex++, item);
             }

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

@@ -179,8 +179,6 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
 
     private ElementReference? _gridReference;
     private Virtualize<(int, TGridItem)>? _virtualizeComponent;
-    private int _ariaBodyRowCount;
-    private ICollection<TGridItem> _currentNonVirtualizedViewItems = Array.Empty<TGridItem>();
 
     // IQueryable only exposes synchronous query APIs. IAsyncQueryExecutor is an adapter that lets us invoke any
     // async query APIs that might be available. We have built-in support for using EF Core's async query APIs.
@@ -333,7 +331,7 @@ private void FinishCollectingColumns()
         _collectingColumns = false;
         _manualGrid = _columns.Count == 0;
 
-        if (!string.IsNullOrWhiteSpace(GridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width)))
+        if (!string.IsNullOrWhiteSpace(GridTemplateColumns) && _columns.Where(x => x is not SelectColumn<TGridItem>).Any(x => !string.IsNullOrWhiteSpace(x.Width)))
         {
             throw new Exception("You can use either the 'GridTemplateColumns' parameter on the grid or the 'Width' property at the column level, not both.");
         }
@@ -441,9 +439,9 @@ private async Task RefreshDataCoreAsync()
             var result = await ResolveItemsRequestAsync(request);
             if (!thisLoadCts.IsCancellationRequested)
             {
-                _currentNonVirtualizedViewItems = result.Items;
-                _ariaBodyRowCount = _currentNonVirtualizedViewItems.Count;
-                Pagination?.SetTotalItemCountAsync(result.TotalItemCount);
+                _internalGridContext.Items = result.Items;
+                _internalGridContext.TotalItemCount = result.TotalItemCount;
+                Pagination?.SetTotalItemCountAsync(_internalGridContext.TotalItemCount);
                 _pendingDataLoadCancellationTokenSource = null;
             }
             _internalGridContext.ResetRowIndexes(startIndex);
@@ -486,10 +484,10 @@ private async ValueTask<ItemsProviderResult<(int, TGridItem)>> ProvideVirtualize
             // the current viewport. In the case where you're also paginating then it means what's conceptually on the current page.
             // TODO: This currently assumes we always want to expand the last page to have ItemsPerPage rows, but the experience might
             //       be better if we let the last page only be as big as its number of actual rows.
-            _ariaBodyRowCount = Pagination is null ? providerResult.TotalItemCount : Pagination.ItemsPerPage;
+            _internalGridContext.TotalItemCount = Pagination is null ? providerResult.TotalItemCount : Pagination.ItemsPerPage;
 
-            Pagination?.SetTotalItemCountAsync(providerResult.TotalItemCount);
-            if (_ariaBodyRowCount > 0)
+            Pagination?.SetTotalItemCountAsync(_internalGridContext.TotalItemCount);
+            if (_internalGridContext.TotalItemCount > 0)
             {
                 Loading = false;
             }
@@ -499,7 +497,7 @@ private async ValueTask<ItemsProviderResult<(int, TGridItem)>> ProvideVirtualize
             // to make sure it doesn't get out of sync with the rows being rendered.
             return new ItemsProviderResult<(int, TGridItem)>(
                  items: providerResult.Items.Select((x, i) => ValueTuple.Create(i + request.StartIndex + 2, x)),
-                 totalItemCount: _ariaBodyRowCount);
+                 totalItemCount: _internalGridContext.TotalItemCount);
         }
 
         return default;
@@ -520,7 +518,7 @@ private async ValueTask<GridItemsProviderResult<TGridItem>> ResolveItemsRequestA
         else if (Items is not null)
         {
             var totalItemCount = _asyncQueryExecutor is null ? Items.Count() : await _asyncQueryExecutor.CountAsync(Items);
-            _ariaBodyRowCount = totalItemCount;
+            _internalGridContext.TotalItemCount = totalItemCount;
             var result = request.ApplySorting(Items).Skip(request.StartIndex);
             if (request.Count.HasValue)
             {

src/Core/Components/DataGrid/Infrastructure/InternalGridContext.cs

@@ -15,6 +15,9 @@ internal sealed class InternalGridContext<TGridItem>
 
     public Dictionary<string, FluentDataGridRow<TGridItem>> Rows { get; set; } = [];
 
+    public ICollection<TGridItem> Items { get; set; } = [];
+    public int TotalItemCount { get; set; }
+
     public FluentDataGrid<TGridItem> Grid { get; }
     public EventCallbackSubscribable<object?> ColumnsFirstCollected { get; } = new();