[DataGrid] Fix column options popup being blank

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

@@ -8233,7 +8233,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.JSRuntime">
             <summary />
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1._jsModule">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.Module">
             <summary />
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.Min">

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -68,7 +68,7 @@
             {
                 @if (Grid.ResizeType is not null)
                 {
-                    <FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
+                    <FluentButton Appearance="Appearance.Stealth" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Resize/filter this column">
                         <FluentIcon Value="@(new CoreIcons.Regular.Size24.ChevronDown())" Color="Color.Neutral" Width="20px" Style="opacity: 0.5;" />
                     </FluentButton>
                 }

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -148,22 +148,47 @@
                                 scope="col"
                                 TGridItem="TGridItem">
                 @col.HeaderContent
-                @if (col == _displayOptionsForColumn)
+
+                @if (HeaderCellAsButtonWithMenu)
                 {
-                    <div class="col-options">
+                    @if (col == _displayOptionsForColumn)
+                    {
+                        <div class="col-options">
                             @col.ColumnOptions
-                    </div>
-                }
-                @if (ResizableColumns && col == _displayResizeForColumn)
-                {
-                    <div class="col-resize">
+                        </div>
+                    }
+                    @if (ResizableColumns && col == _displayResizeForColumn)
+                    {
+                        <div class="col-resize">
 
-                        @if (ResizeType is not null)
-                        {
-                            <ColumnResizeOptions Column="@oneBasedIndex" ResizeType=@ResizeType TGridItem="TGridItem" />
-                        }
+                            @if (ResizeType is not null)
+                            {
+                                <ColumnResizeOptions Column="@oneBasedIndex" ResizeType=@ResizeType TGridItem="TGridItem" />
+                            }
 
-                    </div>
+                        </div>
+                    }
+                }
+                else
+                {
+                    @if (col == _displayOptionsForColumn)
+                    {
+                        <div class="col-options">
+                            <FluentStack Orientation="Orientation.Vertical">
+                                @col.ColumnOptions
+                                @if (ResizeType is not null)
+                                {
+                                    @if (@col.ColumnOptions is not null)
+                                    {
+                                        <FluentDivider Role="DividerRole.Separator" Style="width: 100%;" />
+                                    }
+
+                                    <ColumnResizeOptions Column="@oneBasedIndex" ResizeType=@ResizeType TGridItem="TGridItem" />
+                                }
+
+                            </FluentStack>
+                        </div>
+                    }
                 }
 
                 @if (ResizableColumns)

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

@@ -765,28 +765,44 @@ public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
         //return Task.CompletedTask;
     }
 
-    internal async Task SetColumnWidthDiscreteAsync(int? columnIndex, float widthChange)
+    /// <summary>
+    /// Resizes the column width by a discrete amount.
+    /// </summary>
+    /// <param name="columnIndex">The column to be resized</param>
+    /// <param name="widthChange">The amount of pixels to change width with</param>
+    /// <returns></returns>
+    public async Task SetColumnWidthDiscreteAsync(int? columnIndex, float widthChange)
     {
         if (_gridReference is not null && Module is not null)
         {
             await Module.InvokeVoidAsync("resizeColumnDiscrete", _gridReference, columnIndex, widthChange);
         }
     }
 
-    internal async Task SetColumnWidthExactAsync(int columnIndex, int width)
+    /// <summary>
+    /// Resizes the column width to the exact width specified (in pixels).
+    /// </summary>
+    /// <param name="columnIndex">The column to be resized</param>
+    /// <param name="width">The new width in pixels</param>
+    /// <returns></returns>
+    public async Task SetColumnWidthExactAsync(int columnIndex, int width)
     {
         if (_gridReference is not null && Module is not null)
         {
             await Module.InvokeVoidAsync("resizeColumnExact", _gridReference, columnIndex, width);
         }
     }
 
-    internal async Task ResetColumnWidthsAsync()
+    /// <summary>
+    /// Resets the column widths to their initial values as specified with the <see cref="GridTemplateColumns"/> parameter.
+    /// If no value is specified, the default value is "1fr" for each column.
+    /// </summary>
+    /// <returns></returns>
+    public async Task ResetColumnWidthsAsync()
     {
         if (_gridReference is not null && Module is not null)
         {
             await Module.InvokeVoidAsync("resetColumnWidths", _gridReference);
         }
     }
-
 }