Fix Aspire 3364 by adding IKeyCodeListner and handler

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

@@ -1460,6 +1460,9 @@
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
             </summary>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnInitialized">
+            <inheritdoc />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnParametersSetAsync">
             <inheritdoc />
         </member>

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

@@ -12,7 +12,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// </summary>
 /// <typeparam name="TGridItem">The type of data represented by each row in the grid.</typeparam>
 [CascadingTypeParameter(nameof(TGridItem))]
-public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEvent, IAsyncDisposable
+public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IKeyCodeListener, IHandleEvent, IAsyncDisposable
 {
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js";
     /// <summary>
@@ -146,6 +146,7 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter] public RenderFragment? LoadingContent { get; set; }
     [Inject] private IServiceProvider Services { get; set; } = default!;
     [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
+    [Inject] private IKeyCodeService KeyCodeService { get; set; } = default!;
 
     private ElementReference? _gridReference;
     private Virtualize<(int, TGridItem)>? _virtualizeComponent;
@@ -215,6 +216,12 @@ public FluentDataGrid()
         columnsFirstCollectedSubscriber.SubscribeOrMove(_internalGridContext.ColumnsFirstCollected);
     }
 
+    /// <inheritdoc />
+    protected override void OnInitialized()
+    {
+        KeyCodeService.RegisterListener(OnKeyDownAsync);
+    }
+
     /// <inheritdoc />
     protected override Task OnParametersSetAsync()
     {
@@ -558,4 +565,40 @@ private async Task HandleOnRowFocusAsync(DataGridRowFocusEventArgs args)
             }
         }
     }
+
+    public Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
+    {
+        if (args.ShiftKey == true && args.Key == KeyCode.KeyR)
+        {
+            ResetColumnWidths();
+        }
+
+        if (args.Key == KeyCode.NumpadSubtract || args.Key == KeyCode.Minus2)
+        {
+            SetColumnWidth(-10);
+        }
+        if (args.Key == KeyCode.NumpadAdd || (args.ShiftKey == true && (args.Key == KeyCode.Equal || args.Key == KeyCode.Equal2)))
+        {
+            //  Resize column up
+            SetColumnWidth(10);
+        }
+        return Task.CompletedTask;
+    }
+
+    private void SetColumnWidth(float widthChange)
+    {
+        if (_gridReference is not null)
+        {
+            _ = Module?.InvokeVoidAsync("resizeColumn", _gridReference, widthChange).AsTask();
+        }
+    }
+
+    private void ResetColumnWidths()
+    {
+        if (_gridReference is not null)
+        {
+            _ = Module?.InvokeVoidAsync("resetColumnWidths", _gridReference).AsTask();
+        }
+    }
+
 }

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

@@ -1,8 +1,10 @@
+let initialGridTemplateColumns = '';
 export function init(gridElement) {
     if (gridElement === undefined || gridElement === null) {
         return;
     };
 
+    initialGridTemplateColumns = gridElement.gridTemplateColumns;
     enableColumnResizing(gridElement);
 
     const bodyClickHandler = event => {
@@ -155,3 +157,46 @@ export function enableColumnResizing(gridElement) {
         }
     });
 }
+
+export function resetColumnWidths(gridElement) {
+
+    gridElement.gridTemplateColumns = initialGridTemplateColumns
+}
+
+export function resizeColumn(gridElement, change) {
+    const columns = [];
+    let headerBeingResized = document.activeElement;
+    let min;
+
+    gridElement.querySelectorAll('.column-header.resizable').forEach(header => {
+        columns.push({ header });
+    });
+
+    const column = columns.find(({ header }) => header === headerBeingResized);
+    min = headerBeingResized.querySelector('.col-options-button') ? 75 : 50;
+
+    const width = headerBeingResized.getBoundingClientRect().width;
+
+    if (change < 0) {
+        column.size = Math.max(min, (width + change)) + 'px';
+    }
+    else {
+        column.size = (width + change) + 'px';
+    }
+
+    // Set initial sizes
+    columns.forEach((column) => {
+        if (column.size === undefined) {
+            if (column.header.clientWidth === undefined || column.header.clientWidth === 0) {
+                column.size = '50px';
+            } else {
+                column.size = column.header.clientWidth + 'px';
+            }
+        }
+    });
+
+    gridElement.gridTemplateColumns = columns
+        .map(({ size }) => size)
+        .join(' ');
+
+}