[DataGrid] Fix more header edge cases (#3316)

* - Do not add global.json to repo - Fix #3306 by accounting for Sortable being null - Fix #3309 by adding a StateHasChanged * - Cleanup issueTester - Tune column/style behavior - Fix tests * - Refactor code that determines if column menu needs to be shown - Refactor code that determines if header gets display:flex - Do not show filter icon when using 'clasic' filter option button - Fix more edge cases in displaying headers * Cleanup IssueTester * Fix tests
microsoft · Feb 7, 2025 · a24c3e4 · a24c3e4
1 parent fde55a9
commit a24c3e4
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 35 deletions.
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor
@@ -13,7 +13,6 @@
 
 <FluentToolbar>
     <FluentRadioGroup Name="rt" @bind-Value="@_resizeType" Label="Resize type">
-        <FluentRadio Value="@((DataGridResizeType?)null)">None</FluentRadio>
         <FluentRadio Value="@DataGridResizeType.Discrete">Discrete</FluentRadio>
         <FluentRadio Value="@DataGridResizeType.Exact">Exact</FluentRadio>
     </FluentRadioGroup>

diff --git a/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridCustomComparerPage.razor b/examples/Demo/Shared/Pages/DataGrid/Pages/DataGridCustomComparerPage.razor
@@ -18,5 +18,6 @@
             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>
     </Description>
 </DemoSection>
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
@@ -97,32 +97,35 @@
                             <div class="col-title-text" title="@tooltip">@Title</div>
 
                         @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
+                        {
+                            if (Grid.SortByAscending == true)
                             {
-                                if (Grid.SortByAscending == true)
-                                {
-                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: 0.5;" />
-                                }
-                                else
-                                {
-                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: 0.5;" />
-                                }
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="end" Style="opacity: 0.5;" />
                             }
-                            @if (ColumnOptions is not null && Filtered.GetValueOrDefault())
-                                {
-                                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
-                                }
+                            else
+                            {
+                                <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="end" Style="opacity: 0.5;" />
+                            }
+                        }
+                        @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType is not null)
+                        {
+                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
+                        }
                         </FluentButton>
                 </FluentKeyCode>
             }
             else
             {
                 <div class="col-title" style="@($"width: calc(100% - {wdelta});")">
-                    <div class="col-title-text" title="@tooltip">@Title</div>
+                    <div class="col-title-text" title="@tooltip" >@Title
+                        @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue )
+                        {
+                            <span style="padding: 0 5px;">
+                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="end" Style="opacity: 0.5;" />
+                            </span>
+                        }
+                    </div>
                 </div>
-                @if (ColumnOptions is not null && Filtered.GetValueOrDefault())
-                {
-                    <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="@(Align == Align.End ? "start" : "end")" Style="opacity: 0.5;" />
-                }
             }
 
             @if (Align == Align.End)

diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
@@ -148,7 +148,7 @@ public abstract partial class ColumnBase<TGridItem>
     /// </summary>
     protected FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
-    protected bool AnyColumnActionEnabled => Sortable is true || IsDefaultSortColumn || ColumnOptions != null || Grid.ResizableColumns;
+    protected bool AnyColumnActionEnabled => Sortable is true || ColumnOptions != null || Grid.ResizableColumns;
 
     protected override void OnInitialized()
     {
@@ -251,19 +251,28 @@ public ColumnBase()
 
     private async Task HandleColumnHeaderClickedAsync()
     {
-        if ((Sortable is true || IsDefaultSortColumn) && (Grid.ResizableColumns || ColumnOptions is not null))
+        var hasSorting = Sortable is true || IsDefaultSortColumn;
+        var hasResize = Grid.ResizableColumns;
+        var hasOptions = ColumnOptions is not null;
+        var hasMultiple = (hasSorting && hasResize) || (hasSorting && hasOptions) || (hasResize && hasOptions);
+
+        if (hasMultiple)
         {
             _isMenuOpen = !_isMenuOpen;
             StateHasChanged();
         }
-        else if ((Sortable is true || IsDefaultSortColumn) && !Grid.ResizableColumns && ColumnOptions is null)
+        else if (hasSorting)
         {
             await Grid.SortByColumnAsync(this);
         }
-        else if (Sortable is not true && !IsDefaultSortColumn && ColumnOptions is null && Grid.ResizableColumns)
+        else if (hasResize)
         {
             await Grid.ShowColumnResizeAsync(this);
         }
+        else if (hasOptions)
+        {
+            await Grid.ShowColumnOptionsAsync(this);
+        }
     }
 
     private async Task HandleSortMenuKeyDownAsync(KeyboardEventArgs args)

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css
@@ -27,7 +27,7 @@
 .col-options, .col-resize {
     position: absolute;
     min-width: 250px;
-    top: 2.2rem;
+    top: 2.4rem;
     background: var(--neutral-layer-2);
     border: 1px solid var(--neutral-layer-3);
     border-radius: 0.3rem;

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -79,9 +79,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
-        .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column.Sortable.HasValue && !Column.Sortable.Value)) && Grid._columns.Count > 0)
-        .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && Column is not null && Column.GetType() != typeof(SelectColumn<TGridItem>) && Column.SortBy is null && Grid._columns.Count > 0)
-
+        .AddStyle("display", "flex", ShouldHaveDisplayFlex())
         .AddStyle("z-index", (Grid._columns.Count + 1 - Column?.Index).ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0)
         .AddStyle(Owner.Style)
         .Build();
@@ -128,4 +126,25 @@ internal async Task HandleOnCellKeyDownAsync(KeyboardEventArgs e)
 
     public void Dispose() => Owner.Unregister(this);
 
+    private bool ShouldHaveDisplayFlex()
+    {
+
+        var isHeaderCell = CellType == DataGridCellType.ColumnHeader;
+
+        if (!isHeaderCell)
+        {
+            return false;
+        }
+
+        var isButtonWithMenu = Grid.HeaderCellAsButtonWithMenu;
+        var isResizable = Grid.ResizableColumns;
+        var isNotResizableWithOptions = !Grid.ResizableColumns && Column?.ColumnOptions is not null;
+        var isSelectColumn = Column?.GetType() == typeof(SelectColumn<TGridItem>);
+        //var isColumnNull = Column is null;
+        var isSortable = (Column?.Sortable.HasValue ?? false) && Column?.Sortable.Value == true;
+        var isSortByNull = Column?.SortBy is null;
+        var isColumnsCountGreaterThanZero = Grid._columns.Count > 0;
+
+        return isHeaderCell && !isButtonWithMenu && (isResizable || isNotResizableWithOptions) && !isSelectColumn && isColumnsCountGreaterThanZero && (!isSortable || isSortByNull);
+    }
 }
diff --git a/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -12,7 +12,7 @@
           </fluent-button>
         </span>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

diff --git a/.../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/.../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -12,7 +12,7 @@
           </fluent-button>
         </span>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

diff --git a/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
@@ -12,7 +12,7 @@
           </fluent-button>
         </span>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

diff --git a/.../DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/.../DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
@@ -12,7 +12,7 @@
           </fluent-button>
         </span>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>

diff --git a/...lectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/...lectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
@@ -5,7 +5,7 @@
       <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="cursor: pointer; margin-left: 12px;" blazor:onclick="26" blazor:onkeydown="27">➖</div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

diff --git a/...GridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/...GridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
@@ -9,7 +9,7 @@
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
         </svg>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

diff --git a/...ridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/...ridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
@@ -3,7 +3,7 @@
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
       <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

diff --git a/...umSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html b/...umSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html
@@ -3,7 +3,7 @@
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
       <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 2;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>

diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start" style="grid-column: 1; height: 32px; min-height: 44px; display: flex; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>