[DataGrid] Add ShowResizeIndicator

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

@@ -1937,13 +1937,18 @@
             This allows the user to resize columns manually. Size changes are not persisted.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ShowResizeIndicator">
+            <summary>
+            Gets or sets whether the grid should show a resize indicator on all column cells when resizing a column.
+            </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
             ColumnOptions UI. This parameter allows you to enable or disable this resize UI.Enable it by setting the type of resize to perform
             Discrete: resize by a 10 pixels at a time
             Exact: resize to the exact width specified (in pixels)
-            Note: This does not affect resizing by mouse dragging, just the keyboard driven resize.
+            Note: This does not affect resizing by mouse dragging, only applies to keyboard driven resize.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ColumnResizeLabels">

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

@@ -18,6 +18,7 @@
     </FluentRadioGroup>
     <FluentSpacer Width="25" />
     <FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
+    <FluentCheckbox @bind-Value="@_showResizeIndicator" Label="Show resize indicator" />
 </FluentToolbar>
 <div style="height: 400px; overflow-x:auto; display:flex;">
     <FluentDataGrid Items="@FilteredItems"
@@ -28,7 +29,8 @@
                     TGridItem="Country"
                     OnRowFocus="HandleRowFocus"
                     GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
-                    ShowHover="true">
+                    ShowHover="true"
+                    ShowResizeIndicator="@_showResizeIndicator">
         <TemplateColumn Title="Rank" Sortable="true"  SortBy="@rankSort" Align="Align.Center">
             <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
         </TemplateColumn>
@@ -75,6 +77,7 @@
     string nameFilter = string.Empty;
     DataGridResizeType? _resizeType = null;
     bool _showActionsMenu;
+    bool _showResizeIndicator = true;
 
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)

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

@@ -18,6 +18,21 @@
             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.
         </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>
+        <p>
+            The 'Resize type' radio buttons show how to use the <code>ResizeType</code> parameter. This parameter can be used to specify how the columns should be resized. The options are:
+            <ul>
+                <li><code>DataGridResizeType.Discrete</code>: the column will be resized to the nearest discrete value (default)</li>
+                <li><code>DataGridResizeType.Exact</code>: the column will be resized to the exact value</li>
+            </ul>
+            <em>Note: once a value has been selected for the Resize type, it cannot be set to null again. You need to refresh the page to start with a null value again.</em>
+        </p>
+        <p>
+            The 'Use menu for column actions' checkbox shows how to use the <code>HeaderCellAsButtonWithMenu</code> parameter. When set to true, the headers are rendered as buttons with an associated menu. When clicked,
+            the menu options allow for sorting, filtering and/or resizing columns (depending on how the DataGrid and columns have been configured). From an accessibility standpoint this is the preferred way of working with DataGrid headers.
+        </p>
+        <p>
+            The 'Show Resize Indicator' checkbox shows how to use the <code>ShowResizeIndicator</code> parameter. This parameter can be used to show a resize indicator when a column is being resized.
+            If set to false (default), a resize indicator will not be shown.
+        </p>
     </Description>
 </DemoSection>

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

@@ -114,12 +114,18 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool ResizableColumns { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether the grid should show a resize indicator on all column cells when resizing a column.
+    /// </summary>
+    [Parameter]
+    public bool ShowResizeIndicator { get; set; } = false;
+
     /// <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
     /// Discrete: resize by a 10 pixels at a time
     /// Exact: resize to the exact width specified (in pixels)
-    /// Note: This does not affect resizing by mouse dragging, just the keyboard driven resize.
+    /// Note: This does not affect resizing by mouse dragging, only applies to keyboard driven resize.
     /// </summary>
     [Parameter]
     public DataGridResizeType? ResizeType { get; set; }
@@ -456,7 +462,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
             try
             {
-                _jsEventDisposable = await Module.InvokeAsync<IJSObjectReference>("init", _gridReference, AutoFocus);
+                _jsEventDisposable = await Module.InvokeAsync<IJSObjectReference>("init", _gridReference, AutoFocus, ShowResizeIndicator);
                 if (AutoItemsPerPage)
                 {
                     await Module.InvokeVoidAsync("dynamicItemsPerPage", _gridReference, DotNetObjectReference.Create(this), (int)RowSize);
@@ -793,7 +799,7 @@ private async Task RefreshDataCoreAsync()
 
         if (!request.CancellationToken.IsCancellationRequested)
         {
-            // ARIA's rowcount is part of the UI, so it should reflect what the human user regards as the number of rows in the table,
+            // ARIA's row count is part of the UI, so it should reflect what the human user regards as the number of rows in the table,
             // not the number of physical <tr> elements. For virtualization this means what's in the entire scrollable range, not just
             // the current viewport. In the case where you're also paginating then it means what's conceptually on the current page.
             // TODO: This currently assumes we always want to expand the last page to have ItemsPerPage rows, but the experience might

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

@@ -90,3 +90,9 @@
     background-color: var(--neutral-fill-stealth-rest);
     z-index: 2;
 }
+
+
+::deep .indicator > .resize-indicator {
+    border-inline-end: calc(var(--stroke-width) * 2px) solid var(--neutral-stroke-rest);
+    transition: border-inline-end 0.2s ease-in-out;
+}

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

@@ -1,12 +1,12 @@
 let grids = [];
 const minWidth = 100;
 
-export function init(gridElement, autoFocus) {
+export function init(gridElement, autoFocus, showResizeIndicator) {
     if (gridElement === undefined || gridElement === null) {
         return;
     };
 
-    enableColumnResizing(gridElement);
+    enableColumnResizing(gridElement, showResizeIndicator);
 
     let start = gridElement.querySelector('td:first-child');
 
@@ -158,7 +158,7 @@ export function checkColumnPopupPosition(gridElement, selector) {
     }
 }
 
-export function enableColumnResizing(gridElement) {
+export function enableColumnResizing(gridElement, showResizeIndicator) {
     const columns = [];
     let min = 75;
     let headerBeingResized;
@@ -214,6 +214,16 @@ export function enableColumnResizing(gridElement) {
             window.removeEventListener('pointerleave', onPointerUp);
 
             headerBeingResized.classList.remove('header-being-resized');
+
+            if (showResizeIndicator) {
+                // Add the resize handle back
+                headerBeingResized.querySelector('.resize-handle').style.display = 'block';
+
+                // Remove the indicator class after resizing
+                const cells = gridElement.querySelectorAll('.resize-indicator');
+                cells.forEach(cell => cell.classList.remove('resize-indicator'));
+            }
+
             headerBeingResized = null;
 
             if (e.target.hasPointerCapture(e.pointerId)) {
@@ -225,6 +235,15 @@ export function enableColumnResizing(gridElement) {
             headerBeingResized = target.parentNode;
             headerBeingResized.classList.add('header-being-resized');
 
+            if (showResizeIndicator) {
+                // Hide the resize handle while resizing
+                headerBeingResized.querySelector('.resize-handle').style.display = 'none';
+
+                // Add indicator class to all cells in the column being resized
+                const columnIndex = Array.from(headers).indexOf(headerBeingResized) + 1;
+                const cells = gridElement.querySelectorAll(`[col-index="${columnIndex}"]`);
+                cells.forEach(cell => cell.classList.add('resize-indicator'));
+            }
 
             window.addEventListener('pointermove', onPointerMove);
             window.addEventListener('pointerup', onPointerUp);

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

@@ -66,6 +66,7 @@ public partial class FluentDataGridRow<TGridItem> : FluentComponentBase, IHandle
     protected string? ClassValue => new CssBuilder(Class)
         .AddClass("fluent-data-grid-row")
         .AddClass("hover", when: Grid.ShowHover)
+        .AddClass("indicator", when: Grid.ShowResizeIndicator)
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)