[DataGrid] Fix issue when scrolling horizontally and Virtualize="true" (

#3117) * [DataGrid] - Use correct spacer for Virtualize - Remove unused style - Only render row-type if not default * Add IssueTeste with current issue example * Fix tests * Add specific block to issue page for this issue * Add DataGrid Rendermode * Fix tests * Rename Rendermode to DisplayMode * Fix tests --------- Co-authored-by: Denis Voituron <[email protected]>
microsoft · Jan 2, 2025 · 1f5479d · 1f5479d
1 parent ca96148
commit 1f5479d
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 130 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -1956,6 +1956,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnRowFocus">
             <summary>
             Gets or sets a callback when a row is focused.
+            As of 4.11 a row is a tr element with a 'display: contents'. Browsers can not focus such elements currently, but work is underway to fix that.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnCellFocus">
@@ -13567,6 +13568,23 @@
             Cell is a row header.
             </summary>
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode">
+            <summary>
+            The type of rendering to use for the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode.Grid">
+            <summary>
+            Uses display:grid with HTML table elements to render the DataGrid.
+            With this mode fr units canbe used to set the column widths.
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode.Table">
+            <summary>
+            Uses HTML table elements only to render the DataGrid.
+            With this mode fr units cannot be used to set the column widths.
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridResizeType">
             <summary>
             The type of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.

diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester3102.razor b/examples/Demo/Shared/Pages/Lab/IssueTester3102.razor
@@ -2,8 +2,7 @@
 
 <h2>FluentDataGrid</h2>
 <div style="height: 400px; width: 800px; overflow-y: scroll;">
-    <FluentDataGrid @ref="grid1" Items=@items Virtualize="true" RowSize="DataGridRowSize.Medium" ItemSize="44" GenerateHeader="@GenerateHeaderOption.Sticky">
-
+    <FluentDataGrid @ref="grid1" Items=@items Virtualize="true" RowSize="DataGridRowSize.Medium" ItemSize="44" GenerateHeader="@GenerateHeaderOption.Sticky" DisplayMode="DataGridDisplayMode.Table">
         <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
         <PropertyColumn Property="@(c => c.Item2)" />
         <PropertyColumn Property="@(c => c.Item3)" Align="Align.Center" />
@@ -23,12 +22,9 @@
         <PropertyColumn Property="@(c => c.Item14)" />
         <PropertyColumn Property="@(c => c.Item15)" Align="Align.Center" />
         <PropertyColumn Property="@(c => c.Item16)" Align="Align.End" />
-
-
     </FluentDataGrid>
 </div>
 
-
 @code {
     FluentDataGrid<SampleGridData>? grid1;
     FluentSwitch? _clearToggle;

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -259,6 +259,9 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool AutoFit { get; set; }
 
+    [Parameter]
+    public DataGridDisplayMode DisplayMode { get; set; } = DataGridDisplayMode.Grid;
+
     /// <summary>
     /// Gets or sets the size of each row in the grid based on the <see cref="DataGridRowSize"/> enum.
     /// </summary>
@@ -815,6 +818,7 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
     {
         return new CssBuilder(Class)
             .AddClass("fluent-data-grid")
+            .AddClass("grid", DisplayMode == DataGridDisplayMode.Grid)
             .AddClass("auto-fit", AutoFit)
             .AddClass("loading", _pendingDataLoadCancellationTokenSource is not null)
             .Build();

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css
@@ -1,27 +1,29 @@
 .fluent-data-grid {
     width: auto;
-    display: grid;
+    flex: 1;
     border-collapse: collapse;
     align-items: center;
     height: max-content;
     margin-bottom: 0px;
 }
 
-thead,
-tbody
-{
-    display:contents;
+    .fluent-data-grid.grid {
+        display: grid;
+    }
+
+.grid thead,
+.grid tbody {
+    display: contents;
 }
 
-::deep tr {
+.grid ::deep tr {
     display: contents;
 }
 
 .fluent-data-grid tbody tr .hover {
     background: var(--neutral-fill-stealth-hover);
 }
 
-
 .col-options, .col-resize {
     position: absolute;
     min-width: 250px;
@@ -42,7 +44,7 @@ tbody
 .col-justify-end .col-options,
 .col-justify-right .col-options {
     left: unset;
-    margin-right:  0.6rem;
+    margin-right: 0.6rem;
 }
 
 [dir=rtl] .col-justify-end .col-options,
@@ -88,6 +90,3 @@ tbody
     background-color: var(--neutral-fill-stealth-rest);
     z-index: 2;
 }
-
-
-
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -180,6 +180,7 @@ export function enableColumnResizing(gridElement) {
             if (!headerBeingResized) {
                 return;
             }
+            gridElement.style.tableLayout = "fixed";
 
             const horizontalScrollOffset = document.documentElement.scrollLeft;
             let width;
@@ -212,7 +213,7 @@ export function enableColumnResizing(gridElement) {
             window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('pointerleave', onPointerUp);
 
-            headerBeingResized.classList.remove('header--being-resized');
+            headerBeingResized.classList.remove('header-being-resized');
             headerBeingResized = null;
 
             if (e.target.hasPointerCapture(e.pointerId)) {
@@ -222,7 +223,7 @@ export function enableColumnResizing(gridElement) {
 
         const initResize = ({ target, pointerId }) => {
             headerBeingResized = target.parentNode;
-            headerBeingResized.classList.add('header--being-resized');
+            headerBeingResized.classList.add('header-being-resized');
 
 
             window.addEventListener('pointermove', onPointerMove);

diff --git a/src/Core/Enums/DataGridDisplayMode.cs b/src/Core/Enums/DataGridDisplayMode.cs
@@ -0,0 +1,24 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// The type of rendering to use for the <see cref="FluentDataGrid{TGridItem}"/>
+/// </summary>
+public enum DataGridDisplayMode
+{
+    /// <summary>
+    /// Uses display:grid with HTML table elements to render the DataGrid.
+    /// With this mode fr units canbe used to set the column widths.
+    /// </summary>
+    Grid,
+
+    /// <summary>
+    /// Uses HTML table elements only to render the DataGrid.
+    /// With this mode fr units cannot be used to set the column widths.
+    /// </summary>
+    Table,
+
+}
diff --git a/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -1,7 +1,7 @@
 
-<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
+<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" 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" b-upi3f9mbnn="">
+    <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 col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
@@ -15,21 +15,21 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="2" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="29" blazor:onclick="30" b-w6qdxfylwy="">A</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="31" blazor:onclick="32" b-w6qdxfylwy="">D</td>
+    <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" blazor:onfocus="18" aria-rowindex="2" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" blazor:onfocus="41" b-w6qdxfylwy="">A</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="42" blazor:onclick="43" blazor:onfocus="44" b-w6qdxfylwy="">D</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="3" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="25" blazor:onclick="26" b-w6qdxfylwy="">B</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="27" blazor:onclick="28" b-w6qdxfylwy="">C</td>
+    <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" blazor:onfocus="14" aria-rowindex="3" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" blazor:onfocus="35" b-w6qdxfylwy="">B</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="36" blazor:onclick="37" blazor:onfocus="38" b-w6qdxfylwy="">C</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="4" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="37" blazor:onclick="38" b-w6qdxfylwy="">C</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" b-w6qdxfylwy="">B</td>
+    <tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="23" blazor:onclick="24" blazor:ondblclick="25" blazor:onfocus="26" aria-rowindex="4" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="51" blazor:onclick="52" blazor:onfocus="53" b-w6qdxfylwy="">C</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="54" blazor:onclick="55" blazor:onfocus="56" b-w6qdxfylwy="">B</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" b-w6qdxfylwy="">D</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="35" blazor:onclick="36" b-w6qdxfylwy="">A</td>
+    <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" blazor:onfocus="22" aria-rowindex="5" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="45" blazor:onclick="46" blazor:onfocus="47" b-w6qdxfylwy="">D</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="48" blazor:onclick="49" blazor:onfocus="50" b-w6qdxfylwy="">A</td>
     </tr>
   </tbody>
 </table>
diff --git a/.../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/.../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -1,7 +1,7 @@
 
-<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
+<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" 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" b-upi3f9mbnn="">
+    <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 col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
@@ -15,21 +15,21 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="2" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" b-w6qdxfylwy="">D</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="35" blazor:onclick="36" b-w6qdxfylwy="">A</td>
+    <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" blazor:onfocus="22" aria-rowindex="2" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="45" blazor:onclick="46" blazor:onfocus="47" b-w6qdxfylwy="">D</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="48" blazor:onclick="49" blazor:onfocus="50" b-w6qdxfylwy="">A</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="3" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="37" blazor:onclick="38" b-w6qdxfylwy="">C</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" b-w6qdxfylwy="">B</td>
+    <tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="23" blazor:onclick="24" blazor:ondblclick="25" blazor:onfocus="26" aria-rowindex="3" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="51" blazor:onclick="52" blazor:onfocus="53" b-w6qdxfylwy="">C</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="54" blazor:onclick="55" blazor:onfocus="56" b-w6qdxfylwy="">B</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="4" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="25" blazor:onclick="26" b-w6qdxfylwy="">B</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="27" blazor:onclick="28" b-w6qdxfylwy="">C</td>
+    <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" blazor:onfocus="14" aria-rowindex="4" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" blazor:onfocus="35" b-w6qdxfylwy="">B</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="36" blazor:onclick="37" blazor:onfocus="38" b-w6qdxfylwy="">C</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="5" b-upi3f9mbnn="">
-      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="29" blazor:onclick="30" b-w6qdxfylwy="">A</td>
-      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="31" blazor:onclick="32" b-w6qdxfylwy="">D</td>
+    <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" blazor:onfocus="18" aria-rowindex="5" b-upi3f9mbnn="">
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" blazor:onfocus="41" b-w6qdxfylwy="">A</td>
+      <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="42" blazor:onclick="43" blazor:onfocus="44" b-w6qdxfylwy="">D</td>
     </tr>
   </tbody>
 </table>