[DataGrid] Save paging state in URL

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

@@ -2002,6 +2002,17 @@
             Sets <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SaveStateInUrl">
+            <summary>
+            Gets or sets a value indicating whether the grid should save its paging state in the URL.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SaveStatePrefix">
+            <summary>
+            Gets or sets a prefix to use when saving the grid state in the URL.
+            </summary>
+            <remarks>Only relevant when <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SaveStateInUrl"/> is set to <see langword="true"/> on multiple grids on a single page.</remarks>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.#ctor">
             <summary>
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor

@@ -13,7 +13,9 @@
                 RowStyle="@rowStyle"
                 HeaderCellAsButtonWithMenu="true"
                 Style="height: 405px;overflow:auto;"
-                ColumnResizeLabels="@customLabels">
+                ColumnResizeLabels="@customLabels"
+                SaveStateInUrl="true"
+                SaveStatePrefix="g1">
     <TemplateColumn Tooltip="true" HeaderTooltip="Flag of each team" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
         <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
     </TemplateColumn>

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

@@ -27,6 +27,9 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Inject]
     private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
 
+    [Inject]
+    private NavigationManager NavigationManager { get; set; } = default!;
+
     [Inject]
     private IServiceScopeFactory ScopeFactory { get; set; } = default!;
 
@@ -245,6 +248,19 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool AutoFit { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the grid should save its paging state in the URL.
+    /// </summary>
+    [Parameter]
+    public bool SaveStateInUrl { get; set; }
+
+    /// <summary>
+    /// Gets or sets a prefix to use when saving the grid state in the URL.
+    /// </summary>
+    /// <remarks>Only relevant when <see cref="SaveStateInUrl"/> is set to <see langword="true"/> on multiple grids on a single page.</remarks>
+    [Parameter]
+    public string? SaveStatePrefix { get; set; }
+
     private ElementReference? _gridReference;
     private Virtualize<(int, TGridItem)>? _virtualizeComponent;
 
@@ -322,6 +338,10 @@ public FluentDataGrid()
     protected override void OnInitialized()
     {
         KeyCodeService.RegisterListener(OnKeyDownAsync);
+        if (SaveStateInUrl)
+        {
+            LoadStateFromQueryString(new Uri(NavigationManager.Uri).Query);
+        }
     }
 
     /// <inheritdoc />
@@ -795,6 +815,59 @@ private void CloseColumnResize()
         StateHasChanged();
     }
 
+    private void LoadStateFromQueryString(string queryString)
+    {
+        if (!SaveStateInUrl)
+        {
+            return;
+        }
+
+        var query = System.Web.HttpUtility.ParseQueryString(queryString);
+        if (query.AllKeys.Contains($"{SaveStatePrefix}orderby"))
+        {
+            var orderBy = query[$"{SaveStatePrefix}orderby"]!.Split(' ',2);
+            var title = orderBy[0];
+
+            var column = _columns.FirstOrDefault(c => c.Title == title);
+            if (column is not null)
+            {
+                _sortByColumn = column;
+                _sortByAscending = orderBy.Length == 2 && orderBy[1] == "asc";
+            }
+        }
+
+        if (Pagination is not null)
+        {
+            if (query.AllKeys.Contains($"{SaveStatePrefix}page") && int.TryParse(query[$"{SaveStatePrefix}page"]!, out int page))
+            {
+                Pagination.SetCurrentPageIndexAsync(page - 1);
+            }
+
+            if (query.AllKeys.Contains($"{SaveStatePrefix}top") && int.TryParse(query[$"{SaveStatePrefix}top"]!, out int itemsPerPage))
+            {
+                Pagination.ItemsPerPage = itemsPerPage;
+            }
+        }
+    }
+
+    private void SaveStateToQueryString()
+    {
+        if (!SaveStateInUrl)
+        {
+            return;
+        }
+
+        var stateParams = new Dictionary<string, object?>();
+        if (_sortByColumn is not null)
+        {
+            var order = _sortByAscending ? "asc" : "desc";
+            stateParams.Add($"{SaveStatePrefix}orderby", $"{_sortByColumn.Title} {order}");
+        }
+        stateParams.Add($"{SaveStatePrefix}page", Pagination?.CurrentPageIndex + 1 ?? null);
+        stateParams.Add($"{SaveStatePrefix}top", Pagination?.ItemsPerPage ?? null);
+        NavigationManager.NavigateTo(NavigationManager.GetUriWithQueryParameters(stateParams), replace: true);
+    }
+
     private async Task HandleOnRowFocusAsync(DataGridRowFocusEventArgs args)
     {
         var rowId = args.RowId;
@@ -866,4 +939,10 @@ public async Task ResetColumnWidthsAsync()
             await Module.InvokeVoidAsync("resetColumnWidths", _gridReference);
         }
     }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+        SaveStateToQueryString();
+    }
 }