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 @@
: FluentComponentBase, IHandleEve
[DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(DataGridRowFocusEventArgs))]
public FluentDataGrid()
{
+ Id = Identifier.NewId();
_columns = [];
_internalGridContext = new(this);
_currentPageItemsChanged = new(EventCallback.Factory.Create(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) {