[Datagrid] Page reload issue when using SaveStateInUrl (#2987)

* Fix datagrid page reload * DataGrid SaveStateInUrl disabled in example site --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Nov 29, 2024 · d7d9153 · d7d9153
1 parent c9ce550
commit d7d9153
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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();
-    }
 }