Finish up work for adding the new ResizeColumnOnAllRows parameter

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
@@ -9039,7 +9046,67 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.Fallback">
             <summary>
-            Gets or sets wether ro ignore the HTML5 DnD behaviour and force the fallback to kick in
+            Gets or sets wether to ignore the HTML5 DnD behaviour and force the fallback to kick in
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemFilteredColor">
+            <summary>
+            Gets or sets the color of filtered list items.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListBorderWidth">
+            <summary>
+            Gets or sets the border width on the list. Must be a valid CSS measurement.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListBorderColor">
+            <summary>
+            Gets or sets the color of the border on the list.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListPadding">
+            <summary>
+            Gets or sets the padding on the list. Must be a valid CSS measurement.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemBackgroundColor">
+            <summary>
+            Gets or sets the background color of the list items.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemHeight">
+            <summary>
+            Gets or sets the height of the list items. Must be a valid CSS measurement.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemBorderWidth">
+            <summary>
+            Gets or sets the border width on the list items. Must be a valid CSS measurement.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemBorderColor">
+            <summary>
+            Gets or sets the border color of the list items.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemDropBorderColor">
+            <summary>
+            Gets or sets the border color of the list items during repositioning.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemDropColor">
+            <summary>
+            Gets or sets the background color of the list items during repositioning.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemPadding">
+            <summary>
+            Gets or sets the padding on the list items. Must be a valid CSS measurement.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1.ListItemSpacing">
+            <summary>
+            Gets or sets the spacing between list items. Must be a valid CSS measurement.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs.OldIndex">

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>
 

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.js

@@ -189,7 +189,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 : 40; // fallback to 40px if no headers
+        resizeHandleHeight = headers.length > 0 ? (headers[0].offsetHeight - 14 ): 30; // fallback to 30px if no headers
     }
 
     headers.forEach((header) => {
@@ -198,6 +198,11 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
             size: `${header.clientWidth}px`,
         });
 
+        // 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);
@@ -279,6 +284,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
 
     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';