- DataGrid: Implement ResizeType (a11y req)

- DataGridTypical: Add filter for total, add resize option

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

@@ -1281,7 +1281,7 @@
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1" />.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentColumnResize`1.Grid">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnResizeOptions`1.Grid">
             <summary>
             Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
             </summary>
@@ -12431,7 +12431,7 @@
             The type of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
             </summary>
         </member>
-        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridResizeType.Discreet">
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridResizeType.Discrete">
             <summary>
             Resize datagrid columns by discreet steps of 10 pixels
             </summary>

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

@@ -17,8 +17,20 @@
     <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.End" />
     <PropertyColumn Property="@(c => c.Medals.Total)" Filtered="@(minMedals != 0 || maxMedals != 120)" Align="Align.End" Tooltip="true">
         <ColumnOptions>
-            <p><FluentSlider Label="Min" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;" /><FluentBadge>@minMedals</FluentBadge></p>
-            <p><FluentSlider Label="Max" Min="0" Max="120" Step="1" Orientation="Orientation.Horizontal" @bind-Value=maxMedals Immediate="true" Style="width: 100%;" /><FluentBadge>@maxMedals</FluentBadge></p>
+            <FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;">
+                <FluentSliderLabel Position="0">0</FluentSliderLabel>
+                <FluentSliderLabel Position="50">50</FluentSliderLabel>
+                <FluentSliderLabel Position="100">100</FluentSliderLabel>
+                <FluentSliderLabel Position="150">150</FluentSliderLabel>
+            </FluentSlider>
+            <br /><br />
+            <FluentSlider Label="@($"Max ({maxMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=maxMedals Immediate="true" Style="width: 100%;">
+                <FluentSliderLabel Position="0">0</FluentSliderLabel>
+                <FluentSliderLabel Position="50">50</FluentSliderLabel>
+                <FluentSliderLabel Position="100">100</FluentSliderLabel>
+                <FluentSliderLabel Position="150">150</FluentSliderLabel>
+            </FluentSlider>
+
         </ColumnOptions>
     </PropertyColumn>
 </FluentDataGrid>

src/Core/Components/DataGrid/Columns/FluentColumnResize.razor → src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor

@@ -4,7 +4,7 @@
 <FluentStack Class="resize-options" VerticalAlignment="VerticalAlignment.Center" HorizontalGap="4">
 
 
-    @if (ResizeType == DataGridResizeType.Discreet)
+    @if (ResizeType == DataGridResizeType.Discrete)
     {
         <FluentLabel>@Grid.ResizeLabel</FluentLabel>
 
@@ -21,12 +21,12 @@
     }
     else
     {
-        <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.End">
-            <FluentStack>
-                <FluentInputLabel ForId="width" Orientation="Orientation.Horizontal">@Grid.ResizeLabel</FluentInputLabel>
-                <FluentTextField Id="width" TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric" @bind-Value="@_width" />
-            </FluentStack>
-            <FluentButton Appearance="@Appearance.Accent">Apply</FluentButton>
+        <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End" VerticalAlignment="VerticalAlignment.Center">
+                <FluentTextField Id="width" Style="width: 100%;" TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric" @bind-Value="@_width" Placeholder="@Grid.ResizeLabel" />
+                <FluentButton Appearance="@Appearance.Accent" OnClick="HandleColumnWidthAsync">
+                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.Checkmark())" Color="@Color.Fill" />
+                </FluentButton>
+
         </FluentStack>
     }
 </FluentStack>

src/Core/Components/DataGrid/Columns/FluentColumnResize.razor.cs → src/Core/Components/DataGrid/Columns/ColumnResizeOptions.razor.cs

@@ -2,7 +2,7 @@
 using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
-public partial class FluentColumnResize<TGridItem>
+public partial class ColumnResizeOptions<TGridItem>
 {
     private string? _width;
     [CascadingParameter] internal InternalGridContext<TGridItem> InternalGridContext { get; set; } = default!;
@@ -12,24 +12,47 @@ public partial class FluentColumnResize<TGridItem>
     /// </summary>
     public FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
+    [Parameter]
+    public int Column { get; set; }
+
     [Parameter]
     public string? Label{ get; set; } = "Resize";
 
     [Parameter]
-    public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discreet;
+    public DataGridResizeType? ResizeType { get; set; } = DataGridResizeType.Discrete;
+
+    protected override void OnParametersSet()
+    {
+        if (Column == 0)
+        {
+            throw new ArgumentException("Column must have a value greater than zero");
+        }
+    }
 
     private async Task HandleShrinkAsync()
     {
-        await Grid.SetColumnWidthAsync(-10);
+        await Grid.SetColumnWidthDiscreteAsync(Column, -10);
     }
 
     private async Task HandleGrowAsync()
     {
-        await Grid.SetColumnWidthAsync(10);
+        await Grid.SetColumnWidthDiscreteAsync(Column, 10);
     }
 
     private async Task HandleResetAsync()
     {
         await Grid.ResetColumnWidthsAsync();
     }
+
+    private async Task HandleColumnWidthAsync()
+    {
+
+        var valid = int.TryParse(_width, out var result);
+        if (valid)
+        {
+            await Grid.SetColumnWidthExactAsync(Column, result);
+        }
+    }
+
+
 }

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -132,13 +132,14 @@
         @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
         {
             var col = _columns[colIndex];
+            var oneBasedIndex = colIndex + 1;
             string CellId = Identifier.NewId();
             if (_sortByColumn == col)
                 col.ShowSortIcon = true;
             else
                 col.ShowSortIcon = false;
 
-            <FluentDataGridCell GridColumn=@(colIndex+1)
+            <FluentDataGridCell GridColumn=@oneBasedIndex
                                 CellType=DataGridCellType.ColumnHeader
                                 Class="@("column-header " + @ColumnHeaderClass(col) + (ResizableColumns ? " resizable" : ""))"
                                 Style="@col.Style" aria-sort="@AriaSortValue(col)"
@@ -158,7 +159,7 @@
                                     <FluentDivider Role="DividerRole.Separator" Style="width: 100%;" />
                                 }
 
-                                <FluentColumnResize ResizeType=@ResizeType TGridItem="TGridItem" />
+                                <ColumnResizeOptions Column="@oneBasedIndex" ResizeType=@ResizeType TGridItem="TGridItem" />
                             }
 
                         </FluentStack>

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

@@ -667,21 +667,29 @@ public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
 
         if (args.Value == "-")
         {
-            await SetColumnWidthAsync(-10);
+            await SetColumnWidthDiscreteAsync(null, -10);
         }
         if (args.Value == "+")
         {
             //  Resize column up
-            await SetColumnWidthAsync(10);
+            await SetColumnWidthDiscreteAsync(null, 10);
         }
         //return Task.CompletedTask;
     }
 
-    internal async Task SetColumnWidthAsync(float widthChange)
+    internal async Task SetColumnWidthDiscreteAsync(int? columnIndex, float widthChange)
     {
         if (_gridReference is not null && Module is not null)
         {
-            await Module.InvokeVoidAsync("resizeColumn", _gridReference, widthChange);
+            await Module.InvokeVoidAsync("resizeColumnDiscrete", _gridReference, columnIndex, widthChange);
+        }
+    }
+
+    internal async Task SetColumnWidthExactAsync(int columnIndex, int width)
+    {
+        if (_gridReference is not null && Module is not null)
+        {
+            await Module.InvokeVoidAsync("resizeColumnExact", _gridReference, columnIndex, width);
         }
     }
 

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

@@ -157,18 +157,26 @@ export function resetColumnWidths(gridElement) {
     gridElement.gridTemplateColumns = initialColumnsWidths;
 }
 
-export function resizeColumn(gridElement, change) {
+export function resizeColumnDiscrete(gridElement, column, change) {
 
     let headers = gridElement.querySelectorAll('.column-header.resizable');
     if (headers.length <= 0) {
         return
     }
 
-    if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) {
-        return;
+    let headerBeingResized;
+    if (!column) {
+
+        if (!(document.activeElement.classList.contains("column-header") && document.activeElement.classList.contains("resizable"))) {
+            return;
+        }
+        headerBeingResized = document.activeElement;
+    }
+    else {
+        headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]');
     }
     const columns = [];
-    let headerBeingResized = document.activeElement;
+
     let min = 50;
 
     headers.forEach(header => {
@@ -201,3 +209,47 @@ export function resizeColumn(gridElement, change) {
         .map(({ header }) => header.size)
         .join(' ');
 }
+
+export function resizeColumnExact(gridElement, column, width) {
+
+    let headers = gridElement.querySelectorAll('.column-header.resizable');
+    if (headers.length <= 0) {
+        return
+    }
+
+    let headerBeingResized = gridElement.querySelector('.column-header[grid-column="' + column + '"]');
+    if (!headerBeingResized) {
+        return;
+    }
+    const columns = [];
+
+    let min = 50;
+
+    headers.forEach(header => {
+        if (header === headerBeingResized) {
+            min = headerBeingResized.querySelector('.col-options-button') ? 75 : 50;
+
+            const newWidth = width;
+
+            header.size = Math.max(min, newWidth) + 'px';
+        }
+        else {
+            if (header.size === undefined) {
+                if (header.clientWidth === undefined || header.clientWidth === 0) {
+                    header.size = min + 'px';
+                } else {
+                    header.size = header.clientWidth + 'px';
+                }
+            }
+        }
+
+        columns.push({ header });
+    });
+
+    gridElement.gridTemplateColumns = columns
+        .map(({ header }) => header.size)
+        .join(' ');
+
+    gridElement.dispatchEvent(new CustomEvent('closecolumnoptions', { bubbles: true }));
+    gridElement.focus();
+}

src/Core/Components/Icons/CoreIcons.cs

@@ -93,6 +93,7 @@ internal static partial class Regular
         [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage]
         internal static partial class Size20
         {
+            public class Checkmark : Icon { public Checkmark() : base("Checkmark", IconVariant.Regular, IconSize.Size24, "<path d=\"M4.53 12.97a.75.75 0 0 0-1.06 1.06l4.5 4.5c.3.3.77.3 1.06 0l11-11a.75.75 0 0 0-1.06-1.06L8.5 16.94l-3.97-3.97Z\"/>") { } }
             public class ChevronDoubleLeft : Icon { public ChevronDoubleLeft() : base("ChevronDoubleLeft", IconVariant.Regular, IconSize.Size20, "<path d=\"M11.35 15.85a.5.5 0 0 1-.7 0L5.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L6.2 10l5.16 5.15c.2.2.2.5 0 .7Zm4 0a.5.5 0 0 1-.7 0L9.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L10.2 10l5.16 5.15c.2.2.2.5 0 .7Z\"/>") { } }
             public class ChevronDoubleRight : Icon { public ChevronDoubleRight() : base("ChevronDoubleRight", IconVariant.Regular, IconSize.Size20, "<path d=\"M8.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L13.8 10 8.65 4.85a.5.5 0 0 1 0-.7Zm-4 0c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L9.8 10 4.65 4.85a.5.5 0 0 1 0-.7Z\"/>") { } }
             public class Dismiss : Icon { public Dismiss() : base("Dismiss", IconVariant.Regular, IconSize.Size20, "<path d=\"m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z\"/>") { } }

src/Core/Components/Slider/FluentSlider.razor

@@ -13,9 +13,10 @@
                orientation="@Orientation.ToAttributeValue()"
                mode="@Mode.ToAttributeValue()"
                id="@Id"
-               @bind-value="@CurrentValueAsString"
+               @bind-value=@CurrentValueAsString
                disabled="@Disabled"
                name=@Name
-               required=@Required>
+               required=@Required
+               @onsliderchange="@ChangeHandlerAsync">
     @ChildContent
 </fluent-slider>

src/Core/Enums/DataGridResizeType.cs

@@ -8,7 +8,7 @@ public enum DataGridResizeType
     /// <summary>
     /// Resize datagrid columns by discreet steps of 10 pixels
     /// </summary>
-    Discreet,
+    Discrete,
 
     /// <summary>
     /// Resize datagrid columns by exact pixel values