From d7d91533f6988393cc6c1fbad737431671f375f6 Mon Sep 17 00:00:00 2001
From: Stephan van Rooij <1292510+svrooij@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:42:20 +0100
Subject: [PATCH] [Datagrid] Page reload issue when using `SaveStateInUrl`
 (#2987)

* Fix datagrid page reload

* DataGrid SaveStateInUrl disabled in example site

---------

Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>
---
 .../Shared/Microsoft.FluentUI.AspNetCore.Components.xml  | 1 +
 .../Shared/Pages/DataGrid/Examples/DataGridTypical.razor | 4 +---
 src/Core/Components/DataGrid/FluentDataGrid.razor.cs     | 9 +++------
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index e1407fac8f..d328bc2743 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2028,6 +2028,7 @@
         <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.
+            <para>This is an **experimental** feature, which might cause unwanted jumping in the page when you change something in the grid.</para>
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SaveStatePrefix">
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
index 41394e2099..29f24153a3 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -12,9 +12,7 @@
                     RowClass="@rowClass"
                     RowStyle="@rowStyle"
                     HeaderCellAsButtonWithMenu="true"
-                    ColumnResizeLabels="@customLabels"
-                    SaveStateInUrl="true"
-                    SaveStatePrefix="g1">
+                    ColumnResizeLabels="@customLabels">
         <TemplateColumn Tooltip="true" 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>
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
index 8d6942183b..f6d34a9443 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -271,6 +271,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
 
     /// <summary>
     /// Gets or sets a value indicating whether the grid should save its paging state in the URL.
+    /// <para>This is an experimental feature, which might cause unwanted jumping in the page when you change something in the grid.</para>
     /// </summary>
     [Parameter]
     public bool SaveStateInUrl { get; set; }
@@ -425,6 +426,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             }
         }
 
+        SaveStateToQueryString();
+
         if (_checkColumnOptionsPosition && _displayOptionsForColumn is not null)
         {
             _checkColumnOptionsPosition = false;
@@ -981,10 +984,4 @@ public async Task ResetColumnWidthsAsync()
             await Module.InvokeVoidAsync("resetColumnWidths", _gridReference);
         }
     }
-
-    protected override void OnAfterRender(bool firstRender)
-    {
-        base.OnAfterRender(firstRender);
-        SaveStateToQueryString();
-    }
 }