From 3f9a4c6439b82a6c3ceb64677ab1ebc6afcecf0a Mon Sep 17 00:00:00 2001 From: vnbaaij Date: Tue, 24 Feb 2026 20:59:31 +0100 Subject: [PATCH 1/3] - Add Datagrid OnSortChanged event callback --- Directory.Build.props | 2 +- .../DataGrid/FluentDataGrid.razor.cs | 35 ++++++++++++-- src/Core/Events/DataGridSortEventArgs.cs | 22 +++++++++ .../DataGrid/FluentDataGridTests.razor | 46 +++++++++++++++++++ 4 files changed, 99 insertions(+), 6 deletions(-) create mode 100644 src/Core/Events/DataGridSortEventArgs.cs diff --git a/Directory.Build.props b/Directory.Build.props index 9c384ee84d..d0841c0543 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -22,7 +22,7 @@ 5.0.0 5.0.0 - alpha.1 + RC.2 Microsoft © Microsoft Corporation. All rights reserved. diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 35b6996eeb..546c21b2c7 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -305,6 +305,12 @@ public FluentDataGrid(LibraryConfiguration configuration) : base(configuration) [Parameter] public EventCallback OnCollapseAll { get; set; } + /// + /// Event callback for when the grid's sort order changes. + /// + [Parameter] + public EventCallback> OnSortChanged { get; set; } + /// /// Optionally defines a class to be applied to a rendered row. /// @@ -612,7 +618,7 @@ private void FinishCollectingColumns() /// The column that defines the new sort order. /// The direction of sorting. If the value is , then it will toggle the direction on each call. /// A representing the completion of the operation. - public Task SortByColumnAsync(ColumnBase column, DataGridSortDirection direction = DataGridSortDirection.Auto) + public async Task SortByColumnAsync(ColumnBase column, DataGridSortDirection direction = DataGridSortDirection.Auto) { _sortByAscending = direction switch { @@ -624,8 +630,17 @@ public Task SortByColumnAsync(ColumnBase 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(); } /// @@ -657,18 +672,28 @@ public Task SortByColumnAsync(int index, DataGridSortDirection direction = DataG /// /// The column to check against the current sorted on column. /// A representing the completion of the operation. - public Task RemoveSortByColumnAsync(ColumnBase column) + public async Task RemoveSortByColumnAsync(ColumnBase 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; + await Task.CompletedTask; } /// diff --git a/src/Core/Events/DataGridSortEventArgs.cs b/src/Core/Events/DataGridSortEventArgs.cs new file mode 100644 index 0000000000..8cfd2a8121 --- /dev/null +++ b/src/Core/Events/DataGridSortEventArgs.cs @@ -0,0 +1,22 @@ +// ------------------------------------------------------------------------ +// This file is licensed to you under the MIT License. +// ------------------------------------------------------------------------ + +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +/// Supplies information about a sort change event. +/// +/// The type of data represented by each row in the grid. +public class DataGridSortEventArgs +{ + /// + /// Gets the column that defines the sort order. + /// + public ColumnBase? Column { get; init; } + + /// + /// Gets a value indicating whether the grid is sorted ascending. + /// + public bool SortByAscending { get; init; } +} diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.razor b/tests/Core/Components/DataGrid/FluentDataGridTests.razor index 5cb308b1e6..6d3c1f586e 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.razor +++ b/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? eventArgs = null; + var customers = GetCustomers().AsQueryable(); + + var cut = Render>( + @ + + ); + + 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); + } } From 51096ebfe5a46521f041c3932feaba14aa957e9e Mon Sep 17 00:00:00 2001 From: vnbaaij Date: Tue, 24 Feb 2026 21:12:51 +0100 Subject: [PATCH 2/3] - Add OnSortChanged to example --- .../DataGrid/Examples/DataGridCustomComparer.razor | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridCustomComparer.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridCustomComparer.razor index 740da86225..36ba1753f6 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridCustomComparer.razor +++ b/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"> @@ -123,6 +124,11 @@ Console.WriteLine($"[Custom comparer] Row focused: {row.Item?.Name}"); } + private void HandleSortChanged(DataGridSortEventArgs args) + { + Console.WriteLine($"[Custom comparer] Sort changed: {args.Column?.Title} columns sorted {(args.SortByAscending ? "ascending" : "descending")}"); + } + public class StringLengthComparer : IComparer { public static readonly StringLengthComparer Instance = new StringLengthComparer(); From 68463b1a7182343c4fac48b04d8a065b7337f512 Mon Sep 17 00:00:00 2001 From: vnbaaij Date: Wed, 25 Feb 2026 08:37:52 +0100 Subject: [PATCH 3/3] - Missing inherit from EventArgs - Remove redundant await --- src/Core/Components/DataGrid/FluentDataGrid.razor.cs | 4 +--- src/Core/Events/DataGridSortEventArgs.cs | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 546c21b2c7..4e63b8becb 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -635,7 +635,7 @@ public async Task SortByColumnAsync(ColumnBase column, DataGridSortDi await OnSortChanged.InvokeAsync(new() { Column = _sortByColumn, - SortByAscending = _sortByAscending + SortByAscending = _sortByAscending, }); } @@ -692,8 +692,6 @@ await OnSortChanged.InvokeAsync(new() await RefreshDataCoreAsync(); return; } - - await Task.CompletedTask; } /// diff --git a/src/Core/Events/DataGridSortEventArgs.cs b/src/Core/Events/DataGridSortEventArgs.cs index 8cfd2a8121..4bd2063b18 100644 --- a/src/Core/Events/DataGridSortEventArgs.cs +++ b/src/Core/Events/DataGridSortEventArgs.cs @@ -8,7 +8,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components; /// Supplies information about a sort change event. /// /// The type of data represented by each row in the grid. -public class DataGridSortEventArgs +public class DataGridSortEventArgs : EventArgs { /// /// Gets the column that defines the sort order.