[dev-v5][Datagrid] Add OnSortChanged event callback

Directory.Build.props

@@ -22,7 +22,7 @@
     <!-- Versioning -->
     <VersionFile>5.0.0</VersionFile>
     <VersionPrefix>5.0.0</VersionPrefix>
-    <VersionSuffix>alpha.1</VersionSuffix>
+    <VersionSuffix>RC.2</VersionSuffix>
 
     <Authors>Microsoft</Authors>
     <Copyright>© Microsoft Corporation. All rights reserved.</Copyright>

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

@@ -35,6 +35,7 @@
                     Pagination="@pagination"
                     TGridItem="Country"
                     OnRowFocus="HandleRowFocus"
+                    OnSortChanged="HandleSortChanged"
                     GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
                     ShowHover="true">
         <TemplateColumn Title="Rank" Sortable="true"  SortBy="@rankSort" Align="DataGridCellAlignment.Center">
@@ -123,6 +124,11 @@
         Console.WriteLine($"[Custom comparer] Row focused: {row.Item?.Name}");
     }
 
+    private void HandleSortChanged(DataGridSortEventArgs<Country> args)
+    {
+        Console.WriteLine($"[Custom comparer] Sort changed: {args.Column?.Title} columns sorted {(args.SortByAscending ? "ascending" : "descending")}");
+    }
+
     public class StringLengthComparer : IComparer<string>
     {
         public static readonly StringLengthComparer Instance = new StringLengthComparer();

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

@@ -305,6 +305,12 @@ public FluentDataGrid(LibraryConfiguration configuration) : base(configuration)
     [Parameter]
     public EventCallback OnCollapseAll { get; set; }
 
+    /// <summary>
+    /// Event callback for when the grid's sort order changes.
+    /// </summary>
+    [Parameter]
+    public EventCallback<DataGridSortEventArgs<TGridItem>> OnSortChanged { get; set; }
+
     /// <summary>
     /// Optionally defines a class to be applied to a rendered row.
     /// </summary>
@@ -612,7 +618,7 @@ private void FinishCollectingColumns()
     /// <param name="column">The column that defines the new sort order.</param>
     /// <param name="direction">The direction of sorting. If the value is <see cref="DataGridSortDirection.Auto"/>, then it will toggle the direction on each call.</param>
     /// <returns>A <see cref="Task"/> representing the completion of the operation.</returns>
-    public Task SortByColumnAsync(ColumnBase<TGridItem> column, DataGridSortDirection direction = DataGridSortDirection.Auto)
+    public async Task SortByColumnAsync(ColumnBase<TGridItem> column, DataGridSortDirection direction = DataGridSortDirection.Auto)
     {
         _sortByAscending = direction switch
         {
@@ -624,8 +630,17 @@ public Task SortByColumnAsync(ColumnBase<TGridItem> column, DataGridSortDirectio
 
         _sortByColumn = column;
 
+        if (OnSortChanged.HasDelegate)
+        {
+            await OnSortChanged.InvokeAsync(new()
+            {
+                Column = _sortByColumn,
+                SortByAscending = _sortByAscending,
+            });
+        }
+
         _ = InvokeAsync(StateHasChanged); // We want to see the updated sort order in the header, even before the data query is completed
-        return RefreshDataAsync();
+        await RefreshDataAsync();
     }
 
     /// <summary>
@@ -657,18 +672,26 @@ public Task SortByColumnAsync(int index, DataGridSortDirection direction = DataG
     /// </summary>
     /// <param name="column">The column to check against the current sorted on column.</param>
     /// <returns>A <see cref="Task"/> representing the completion of the operation.</returns>
-    public Task RemoveSortByColumnAsync(ColumnBase<TGridItem> column)
+    public async Task RemoveSortByColumnAsync(ColumnBase<TGridItem> column)
     {
         if (_sortByColumn == column && !column.IsDefaultSortColumn)
         {
             _sortByColumn = _internalGridContext.DefaultSortColumn.Column ?? null;
             _sortByAscending = _internalGridContext.DefaultSortColumn.Direction != DataGridSortDirection.Descending;
 
+            if (OnSortChanged.HasDelegate)
+            {
+                await OnSortChanged.InvokeAsync(new()
+                {
+                    Column = _sortByColumn,
+                    SortByAscending = _sortByAscending
+                });
+            }
+
             _ = InvokeAsync(StateHasChanged); // We want to see the updated sort order in the header, even before the data query is completed
-            return RefreshDataCoreAsync();
+            await RefreshDataCoreAsync();
+            return;
         }
-
-        return Task.CompletedTask;
     }
 
     /// <summary>

src/Core/Events/DataGridSortEventArgs.cs

@@ -0,0 +1,22 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Supplies information about a sort change event.
+/// </summary>
+/// <typeparam name="TGridItem">The type of data represented by each row in the grid.</typeparam>
+public class DataGridSortEventArgs<TGridItem> : EventArgs
+{
+    /// <summary>
+    /// Gets the column that defines the sort order.
+    /// </summary>
+    public ColumnBase<TGridItem>? Column { get; init; }
+
+    /// <summary>
+    /// Gets a value indicating whether the grid is sorted ascending.
+    /// </summary>
+    public bool SortByAscending { get; init; }
+}

tests/Core/Components/DataGrid/FluentDataGridTests.razor

@@ -2320,4 +2320,50 @@
         await cut.InvokeAsync(() => grid.RefreshDataAsync(force: true));
         Assert.Equal(2, refreshCount);
     }
+
+    [Fact]
+    public async Task FluentDataGrid_OnSortChanged_Fires()
+    {
+        // Arrange
+        var sortChanged = false;
+        DataGridSortEventArgs<Customer>? eventArgs = null;
+        var customers = GetCustomers().AsQueryable();
+
+        var cut = Render<FluentDataGrid<Customer>>(
+            @<FluentDataGrid TGridItem="Customer" Items="@customers" OnSortChanged="@(e => { sortChanged = true; eventArgs = e; })">
+                <PropertyColumn Property="@(i => i.Name)" Title="Name" Sortable="true" />
+            </FluentDataGrid>);
+
+        var grid = cut.Instance;
+        var column = grid._columns[0];
+
+        // Act
+        await cut.InvokeAsync(() => grid.SortByColumnAsync(column, DataGridSortDirection.Ascending));
+
+        // Assert
+        Assert.True(sortChanged);
+        Assert.Equal(column, eventArgs?.Column);
+        Assert.True(eventArgs?.SortByAscending);
+
+        // Reset
+        sortChanged = false;
+
+        // Act - toggle to Descending. direction = Auto means "toggle".
+        await cut.InvokeAsync(() => grid.SortByColumnAsync(column, DataGridSortDirection.Auto));
+
+        // Assert
+        Assert.True(sortChanged);
+        Assert.Equal(column, eventArgs?.Column);
+        Assert.False(eventArgs?.SortByAscending);
+
+        // Reset
+        sortChanged = false;
+
+        // Act - Remove sort
+        await cut.InvokeAsync(() => grid.RemoveSortByColumnAsync(column));
+
+        // Assert
+        Assert.True(sortChanged);
+        Assert.Null(eventArgs?.Column);
+    }
 }