From ac17756278788dffc798d4478ca7dc7170a6943f Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Wed, 21 Aug 2024 17:10:48 +0200
Subject: [PATCH] [DataGrid] Fix resizing to initial column widths issue
 (#2561)

* Use dictionary for initialColumnsWidths

* Add cleanup
---
 src/Core/Components/DataGrid/FluentDataGrid.razor    |  1 +
 src/Core/Components/DataGrid/FluentDataGrid.razor.cs |  1 +
 src/Core/Components/DataGrid/FluentDataGrid.razor.js | 11 ++++++-----
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
index bc357fb78..8cd7c131a 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -18,6 +18,7 @@
         <ColumnsCollectedNotifier TGridItem="TGridItem" />
 
         <fluent-data-grid @ref=_gridReference
+                          id="@Id"
                           no-tabbing=@NoTabbing
                           generate-header="none"
                           grid-template-columns=@_internalGridTemplateColumns
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
index b6574581c..a19090728 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -280,6 +280,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(DataGridRowFocusEventArgs))]
     public FluentDataGrid()
     {
+        Id = Identifier.NewId();
         _columns = [];
         _internalGridContext = new(this);
         _currentPageItemsChanged = new(EventCallback.Factory.Create<PaginationState>(this, RefreshDataCoreAsync));
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
index 2991e70d0..1606a5f19 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -1,4 +1,4 @@
-var initialColumnsWidths = '';
+let initialColumnsWidths = {};
 var latestGridElement = null;
 
 export function init(gridElement) {
@@ -7,7 +7,7 @@ export function init(gridElement) {
     };
 
     if (gridElement.querySelectorAll('.column-header.resizable').length > 0) {
-        initialColumnsWidths = gridElement.gridTemplateColumns;
+        initialColumnsWidths[gridElement.id] = gridElement.gridTemplateColumns ;
         enableColumnResizing(gridElement);
     }
 
@@ -63,6 +63,7 @@ export function init(gridElement) {
             document.body.removeEventListener('click', bodyClickHandler);
             document.body.removeEventListener('mousedown', bodyClickHandler);
             document.body.removeEventListener('keydown', keyDownHandler);
+            delete initialColumnsWidths[gridElement.id];
         }
     };
 }
@@ -158,8 +159,8 @@ export function enableColumnResizing(gridElement) {
 }
 
 export function resetColumnWidths(gridElement) {
-    
-    gridElement.gridTemplateColumns = initialColumnsWidths;
+
+    gridElement.gridTemplateColumns = initialColumnsWidths[gridElement.id];
 }
 
 export function resizeColumnDiscrete(gridElement, column, change) {
@@ -231,7 +232,7 @@ export function autoFitGridColumns(gridElement, columnCount) {
     gridElement.setAttribute("grid-template-columns", gridTemplateColumns);
     gridElement.classList.remove("auto-fit");
 
-    initialColumnsWidths = gridTemplateColumns;
+    initialColumnsWidths[gridElement.id] = gridTemplateColumns;
 }
 
 export function resizeColumnExact(gridElement, column, width) {