[DataGrid] Fix resizing to initial column widths issue (#2561)

* Use dictionary for initialColumnsWidths * Add cleanup
microsoft · Aug 21, 2024 · ac17756 · ac17756
1 parent 86b74e2
commit ac17756
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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) {