diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index e20a59ea0c..eeddcfa75e 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/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. + + + 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. + + To comply with WCAG 2.2, a one-click option should be offered to change column widths. We provide such an option through the diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index a7630d15da..49020b6325 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -64,9 +64,23 @@

Row size

As of v4.11.0, the Datagrid offers a RowSize parameter which allows you to use different preset row heights. The value uses the DataGridRowSize enumeration for its type. - When using Virtualize, the ItemSize value isused is still used to indicate the row height. + When using Virtualize, the ItemSize value is used is still used to indicate the row height.

+

Resizing columns

+

+ 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) ResizeColumnOnAllRows parameter can be set to false. + +

+

The following parameters can be used to tweak the resize handle appearance:

+ .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; + +

DisplayMode

The DataGrid supports 2 different display modes through the DisplayMode parameter: DataGridDisplayMode.Grid (default) and diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor index f3ea596482..27ffb2c55a 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor @@ -5,6 +5,11 @@ @@ -19,11 +24,13 @@ +

rankSort = GridSort .ByDescending(x => x.Medals.Gold) diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index f1fb0be594..d8a36d4862 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -2,6 +2,7 @@

To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact

Remove the parameter completely to get the original behavior

+

Use ResizeColumnOnAllRows="false" to limit column resizing to header cells only (default is true for all rows)

OnRowFocus event callback to detect which row the cursor is over. By setting ShowHover 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 --datagrid-hover-color CSS variable. See the Razor tab for how this is done in this example. +
+ 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.

+

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.

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index a34404ef90..1cd7123d28 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -115,6 +115,14 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve [Parameter] public bool ResizableColumns { get; set; } + /// + /// 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. + /// + [Parameter] + public bool ResizeColumnOnAllRows { get; set; } = true; + /// /// 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(); } } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index fc6e9aa803..a540a0045d 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/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'; diff --git a/tests/Core/DataGrid/FluentDataGridTests.razor b/tests/Core/DataGrid/FluentDataGridTests.razor index 016ffba33f..0d1cacb637 100644 --- a/tests/Core/DataGrid/FluentDataGridTests.razor +++ b/tests/Core/DataGrid/FluentDataGridTests.razor @@ -28,6 +28,40 @@ cut.Verify(); } + [Fact] + public void FluentDataGrid_ResizeColumnOnAllRows_Default() + { + // Arrange && Act + var cut = Render>( + @ + + + + ); + + // Assert + var component = cut.Instance; + Assert.True(component.ResizeColumnOnAllRows); // Default should be true + } + + [Fact] + public void FluentDataGrid_ResizeColumnOnAllRows_False() + { + // Arrange && Act + var cut = Render>( + @ + + + + ); + + // Assert + var component = cut.Instance; + Assert.False(component.ResizeColumnOnAllRows); + } + [Fact] public void FluentDataGrid_With_Empty_Items_Stays_Loading_Until_Changed() {