Users/vnbaaij/improve datagrid script (#4500)

* 1. Cleanup Logic: Updated the stop function in init to explicitly abort and remove the resizeController for the grid instance.
2. Dynamic AbortSignal: Updated enableColumnResizing to:
• Detect if a grid already has a resizeController and abort it before creating a new one (e.g., when columns are re-evaluated).
1. Create a localController if no external signal is provided from Blazor.
2. Use an effectiveSignal for all resizing event listeners.
3. Registry Persistence: Modified the grid registration logic to store the resizeController so it can be managed during re-initialization or disposal.

These changes ensure that whenever column resizing is re-enabled (which happens in Blazor when columns change), the old JS listeners are properly cleaned up via the AbortController.

* - Improve key handling
- Port v5 script improvement

* Update some samples and refine DG script

Author: vnbaaij

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor

@@ -4,13 +4,13 @@
 {
     <style>
         :root {
-            --datagrid-hover-color: lightyellow;
-
+			--datagrid-hover-color: lightyellow;
         }
 
         .fluent-data-grid {
-            --fluent-data-grid-resize-handle-color: var(--neutral-stroke-rest) !important;
-        }
+			--fluent-data-grid-resize-handle-color: var(--neutral-stroke-rest) !important;
+			--fluent-data-grid-header-opacity: 1 !important;
+		}
     </style>
 
 }

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor.css

@@ -1,6 +1,6 @@
-/* Ensure all the flags are the same size, and centered */
+/* Ensure all the flags are the same size, and centered */
 .flag {
     height: 1rem;
     margin: auto;
     border: 1px solid var(--neutral-layer-3);
-}
+}

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridHierarchical.razor

@@ -8,6 +8,7 @@
 
 	.fluent-data-grid {
 		--fluent-data-grid-resize-handle-color: var(--neutral-stroke-rest) !important;
+		--fluent-data-grid-resize-handle-opacity: 1 !important;
 	}
 
 	.flag {

src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor

@@ -7,9 +7,9 @@
         <FluentLabel>@Grid.ColumnResizeLabels.DiscreteLabel</FluentLabel>
 
         <FluentSpacer />
-        <FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" aria-label="@(Grid.ColumnResizeLabels.ShrinkAriaLabel)" />
-        <FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" aria-label="@(Grid.ColumnResizeLabels.GrowAriaLabel)" />
-        <FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@(Grid.ColumnResizeLabels.ResetAriaLabel)" />
+        <FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" aria-label="@(Grid.ColumnResizeLabels.ShrinkAriaLabel)" tabindex="0" Autofocus="true"/>
+        <FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" aria-label="@(Grid.ColumnResizeLabels.GrowAriaLabel)" tabindex="0" />
+        <FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@(Grid.ColumnResizeLabels.ResetAriaLabel)" tabindex="0	" />
     }
     else
     {

src/Core/Components/DataGrid/FluentDataGrid.razor.js

@@ -26,6 +26,20 @@ export function init(gridElement, autoFocus) {
             gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
         }
     };
+    const bodyKeyDownHandler = event => {
+        if (event.key === "Escape") {
+            const columnOptionsElement = gridElement?.querySelector('.col-options');
+            if (columnOptionsElement && columnOptionsElement.contains(event.target)) {
+                gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
+                gridElement.focus();
+            }
+            const columnResizeElement = gridElement?.querySelector('.col-resize');
+            if (columnResizeElement) {
+                gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
+                gridElement.focus();
+            }
+        }
+    };
     const keyboardNavigation = (sibling) => {
         if (sibling !== null) {
             start.focus();
@@ -38,21 +52,15 @@ export function init(gridElement, autoFocus) {
         if (columnOptionsElement && columnOptionsElement.contains(event.target)) {
             if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.stopPropagation();
-            }
-            if (event.key === "Escape") {
-                gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
-                gridElement.focus();
+                return;
             }
         }
 
         const columnResizeElement = gridElement?.querySelector('.col-resize');
         if (columnResizeElement && columnResizeElement.contains(event.target)) {
             if (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.stopPropagation();
-            }
-            if (event.key === "Escape") {
-                gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
-                gridElement.focus();
+                return;
             }
         }
 
@@ -123,6 +131,7 @@ export function init(gridElement, autoFocus) {
 
     document.body.addEventListener('click', bodyClickHandler, { signal });
     document.body.addEventListener('mousedown', bodyClickHandler, { signal }); // Otherwise it seems strange that it doesn't go away until you release the mouse button
+    document.body.addEventListener('keydown', bodyKeyDownHandler, { signal });
     gridElement.addEventListener('keydown', keyDownHandler, { signal });
 
     return {
@@ -131,6 +140,10 @@ export function init(gridElement, autoFocus) {
 
             const index = grids.findIndex(grid => grid.id === gridElement.id);
             if (index > -1) {
+                const grid = grids[index];
+                if (grid.resizeController) {
+                    grid.resizeController.abort();
+                }
                 grids.splice(index, 1);
             }
         }
@@ -167,6 +180,16 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         return;
     }
 
+    const id = gridElement.id;
+    let grid = grids.find(g => g.id === id);
+
+    if (grid?.resizeController) {
+        grid.resizeController.abort();
+    }
+
+    const localController = signal ? null : new AbortController();
+    const effectiveSignal = signal ?? localController.signal;
+
     const isGrid = gridElement.classList.contains('grid')
 
     let tableHeight = gridElement.offsetHeight;
@@ -186,7 +209,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
     if (!resizeColumnOnAllRows) {
         // Only use the header height when resizeColumnOnAllRows is false
         // Use the first header's height if available
-        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 32; // fallback to 32px if no headers
+        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14) : 32; // fallback to 32px if no headers
     }
 
     headers.forEach((header) => {
@@ -196,7 +219,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         });
 
         // remove any previously created divs
-        const resizedivs  = header.querySelectorAll(".actual-resize-handle");
+        const resizedivs = header.querySelectorAll(".actual-resize-handle");
         resizedivs.forEach(div => div.remove());
 
         // Get the top of the first resize-handle
@@ -205,7 +228,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         // add a new resize div
         const div = createDiv(resizeHandleHeight, resizeTop);
         header.appendChild(div);
-        setListeners(div, signal);
+        setListeners(div, effectiveSignal);
     });
 
     let initialWidths;
@@ -219,13 +242,20 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true,
         }
     }
 
-    const id = gridElement.id;
-    if (!grids.find(grid => grid.id === id)) {
+    if (!grid) {
         grids.push({
             id,
             columns,
             initialWidths,
+            resizeController: signal ? undefined : localController,
         });
+    } else {
+        const columnsChanged = grid.columns.length !== columns.length;
+        grid.columns = columns;
+        if (columnsChanged) {
+            grid.initialWidths = initialWidths;
+        }
+        grid.resizeController = signal ? undefined : localController;
     }
 
     function setListeners(div, signal) {
@@ -334,19 +364,23 @@ export function resetColumnWidths(gridElement) {
         return;
     }
 
-    const columnsWidths = grid.initialWidths.split(' ');
-
-    grid.columns.forEach((column, index) => {
-        if (isGrid) {
-            column.size = columnsWidths[index];
-        } else {
-            column.header.style.width = columnsWidths[index];
-        }
-    });
-
     if (isGrid) {
         gridElement.style.gridTemplateColumns = grid.initialWidths;
+
+        // Force browser to recalculate so we can get accurate computed widths
+        const resolvedWidths = window.getComputedStyle(gridElement).gridTemplateColumns.split(' ');
+
+        grid.columns.forEach((column, index) => {
+            column.size = resolvedWidths[index];
+        });
+    } else {
+        const columnsWidths = grid.initialWidths.split(' ');
+        grid.columns.forEach((column, index) => {
+            column.size = columnsWidths[index];
+            column.header.style.width = column.size;
+        });
     }
+
     gridElement.dispatchEvent(
         new CustomEvent('closecolumnresize', { bubbles: true })
     );