Add ResizeColumnOnAllRows parameter to control column resize behavior

Co-authored-by: vnbaaij <[email protected]>

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

@@ -2,6 +2,7 @@
 
 <p>To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact</p>
 <p>Remove the parameter completely to get the original behavior</p>
+<p>Use ResizeColumnOnAllRows="false" to limit column resizing to header cells only (default is true for all rows)</p>
 
 <div style="height: 380px; overflow-x:auto; display:flex;">
     <FluentDataGrid @ref="grid"

global.json

@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "8.0.116",
+    "version": "9.0.204",
     "allowPrerelease": true,
     "rollForward": "latestPatch"
   }

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

@@ -115,6 +115,14 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool ResizableColumns { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether column resize handles should extend the full height of the grid.
+    /// When true, columns can be resized by dragging from any row. When false, columns can only be resized 
+    /// by dragging from the column header. Default is true.
+    /// </summary>
+    [Parameter]
+    public bool ResizeColumnOnAllRows { get; set; } = true;
+
     /// <summary>
     /// To comply with WCAG 2.2, a one-click option should be offered to change column widths. We provide such an option through the
     /// ColumnOptions UI. This parameter allows you to enable or disable this resize UI.Enable it by setting the type of resize to perform
@@ -551,7 +559,7 @@ private void FinishCollectingColumns()
 
         if (ResizableColumns)
         {
-            _ = Module?.InvokeVoidAsync("enableColumnResizing", _gridReference).AsTask();
+            _ = Module?.InvokeVoidAsync("enableColumnResizing", _gridReference, ResizeColumnOnAllRows).AsTask();
         }
     }
 

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

@@ -161,7 +161,7 @@ export function checkColumnPopupPosition(gridElement, selector) {
     }
 }
 
-export function enableColumnResizing(gridElement) {
+export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true) {
     const columns = [];
     const headers = gridElement.querySelectorAll('.column-header.resizable');
 
@@ -184,13 +184,21 @@ export function enableColumnResizing(gridElement) {
         }
     }
 
+    // Determine the height based on the resizeColumnOnAllRows parameter
+    let resizeHandleHeight = tableHeight;
+    if (!resizeColumnOnAllRows) {
+        // Only use the header height when resizeColumnOnAllRows is false
+        const headerRow = gridElement.querySelector('thead tr th');
+        resizeHandleHeight = headerRow ? headerRow.offsetHeight : 40; // fallback to 40px if header not found
+    }
+
     headers.forEach((header) => {
         columns.push({
             header,
             size: `${header.clientWidth}px`,
         });
 
-        const div = createDiv(tableHeight, isRTL);
+        const div = createDiv(resizeHandleHeight, isRTL);
         header.appendChild(div);
         setListeners(div, isRTL);
     });

tests/Core/DataGrid/FluentDataGridTests.razor

@@ -28,6 +28,40 @@
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentDataGrid_ResizeColumnOnAllRows_Default()
+    {
+        // Arrange && Act
+        var cut = Render<FluentDataGrid<Customer>>(
+            @<FluentDataGrid Items="@GetCustomers().AsQueryable()" ResizableColumns="true">
+                <ChildContent>
+                    <PropertyColumn Property="@(x => x.Name)" />
+                </ChildContent>
+            </FluentDataGrid>);
+
+        // Assert
+        var component = cut.Instance;
+        Assert.True(component.ResizeColumnOnAllRows); // Default should be true
+    }
+
+    [Fact]
+    public void FluentDataGrid_ResizeColumnOnAllRows_False()
+    {
+        // Arrange && Act
+        var cut = Render<FluentDataGrid<Customer>>(
+            @<FluentDataGrid Items="@GetCustomers().AsQueryable()" 
+                           ResizableColumns="true" 
+                           ResizeColumnOnAllRows="false">
+                <ChildContent>
+                    <PropertyColumn Property="@(x => x.Name)" />
+                </ChildContent>
+            </FluentDataGrid>);
+
+        // Assert
+        var component = cut.Instance;
+        Assert.False(component.ResizeColumnOnAllRows);
+    }
+
     [Fact]
     public void FluentDataGrid_With_Empty_Items_Stays_Loading_Until_Changed()
     {