[DataGrid] Add parameter to configure full column resize

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1951,6 +1951,13 @@
             This allows the user to resize columns manually. Size changes are not persisted.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeColumnOnAllRows">
+            <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>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ResizeType">
             <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

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -64,9 +64,23 @@
 <h2 id="styling">Row size</h2>
 <p>
     As of v4.11.0, the Datagrid offers a <code>RowSize</code> parameter which allows you to use different preset row heights. The value uses the <code>DataGridRowSize</code> enumeration for its type.
-    When using <code>Virtualize</code>, the <code>ItemSize</code> value isused is still used to indicate the row height.
+    When using <code>Virtualize</code>, the <code>ItemSize</code> value is used is still used to indicate the row height.
 </p>
 
+<h2 id="styling">Resizing columns</h2>
+<p>
+    The DataGrid supports resizing columns by both dragging and through column option popups in exact or discrete mode. As of v4.12.0,
+    the default behavior is to initiate a resize action by dragging the column edge on every row. In earlier versions this could only be done
+    on the header column edge. To go back to the previous behavior, the new (as of v4.12.1) <code>ResizeColumnOnAllRows</code> parameter can be set to false.
+
+</p>
+<p>The following parameters can be used to tweak the resize handle appearance:</p>
+    <CodeSnippet Language="css">.fluent-data-grid {
+        --fluent-data-grid-resize-handle-color: var(--accent-fill-rest);
+        --fluent-data-grid-resize-handle-width: 1px;
+        --fluent-data-grid-header-opacity: 0.5;
+        </CodeSnippet>
+
 <h2 id="displaymode">DisplayMode</h2>
 <p>
     The DataGrid supports 2 different display modes through the <code>DisplayMode</code> parameter: <code>DataGridDisplayMode.Grid</code> (default) and

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

@@ -5,6 +5,11 @@
     <style>
         :root {
             --datagrid-hover-color: lightyellow;
+
+        }
+
+        .fluent-data-grid {
+            --fluent-data-grid-resize-handle-color: var(--neutral-stroke-rest) !important;
         }
     </style>
 
@@ -19,11 +24,13 @@
     <FluentSpacer Width="25" />
     <FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
     <FluentCheckbox @bind-Value="@_useMenuService" Label="Use service for rendering menu" Disabled="!_showActionsMenu" />
+    <FluentCheckbox @bind-Value="@_resizeColumnOnAllRows" Label="Resize column on all rows" />
 </FluentToolbar>
 <div style="height: 400px; overflow-x:auto; display:flex;">
     <FluentDataGrid Items="@FilteredItems"
                     ResizableColumns=true
                     ResizeType="@_resizeType"
+                    ResizeColumnOnAllRows="@_resizeColumnOnAllRows"
                     HeaderCellAsButtonWithMenu="_showActionsMenu"
                     UseMenuService="_useMenuService"
                     Pagination="@pagination"
@@ -78,6 +85,7 @@
     DataGridResizeType? _resizeType = null;
     bool _showActionsMenu;
     bool _useMenuService = true;
+    bool _resizeColumnOnAllRows = true;
 
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)

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"

examples/Demo/Shared/Pages/DataGrid/Pages/DataGridCustomComparerPage.razor

@@ -17,7 +17,10 @@
             This example also shows using an <code>OnRowFocus</code> event callback to detect which row the cursor is over. By setting <code>ShowHover</code>
             to true, the current row will be highlighted. By default the system will use the designated hover color for this but you can specify an alternative
             color by setting the <code>--datagrid-hover-color</code> CSS variable. See the Razor tab for how this is done in this example.
+            <br />
+            To show how the resize handle can be altered, when choosing to use the alternate hover color, the handle color is set to a different value.
         </p>
+        <p></p>
         <p><em>Note: once a value has been selected for the Resize type, it cannot by set to null again. You need to refresh the page to start with a null value again.</em></p>
     </Description>
 </DemoSection>

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,26 @@ 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
+        // Use the first header's height if available
+        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 30; // fallback to 30px if no headers
+    }
+
     headers.forEach((header) => {
         columns.push({
             header,
             size: `${header.clientWidth}px`,
         });
 
-        const div = createDiv(tableHeight, isRTL);
+        // remove any previously created divs
+        const resizedivs  = header.querySelectorAll(".actual-resize-handle");
+        resizedivs.forEach(div => div.remove());
+
+        // add a new resize div
+        const div = createDiv(resizeHandleHeight, isRTL);
         header.appendChild(div);
         setListeners(div, isRTL);
     });
@@ -271,6 +284,7 @@ export function enableColumnResizing(gridElement) {
 
     function createDiv(height, isRTL) {
         const div = document.createElement('div');
+        div.className = "actual-resize-handle";
         div.style.top = '5px';
         div.style.position = 'absolute';
         div.style.cursor = 'col-resize';

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()
     {