[DataGrid] Fix styling when using Virtualize with DataGridDisplayMode.Table

examples/Demo/Client/wwwroot/index.html

@@ -48,9 +48,10 @@
         <div class="loading-progress-text"></div>
 
         <div class="loading-info">
-            <h1>Fluent UI Blazor</h1>
-            <em style="display: block; margin-bottom: 1em;">Welcom to the Fluent UI Blazor component library demo and documentation site!</em>
-            <a href="https://github.com/microsoft/fluentui-blazor" target="_blank">GitHub repository</a>
+            <em style="display: block;">Welcome to the</em>
+            <h1 style="margin: 1em 0;">Fluent UI Blazor</h1>
+            <em style="display: block; margin-bottom: 1em;">demo and documentation site!</em>
+            <a style="font-size: initial;" href="https://github.com/microsoft/fluentui-blazor" target="_blank">GitHub repository</a>
         </div>
     </div>
 

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

@@ -2042,6 +2042,15 @@
             Automatically fit the number of items per page to the available height.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.DisplayMode">
+            <summary>
+            Gets or set the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode"/> of the grid.
+            Default is 'Grid'.
+            When set to Grid, <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns" /> can be used to specify column widths.
+            When set to Table, widths need to be specified at the column level.
+            When using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Virtualize"/>, it is recommended to use Table.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.RowSize">
             <summary>
             Gets or sets the size of each row in the grid based on the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize"/> enum.

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -67,6 +67,18 @@
     When using <code>Virtualize</code>, the <code>ItemSize</code> value isused is still used to indicate the row height.
 </p>
 
+<h2 id="displaymode">DisplayMode</h2>
+<p>
+    The DataGrid supports 2 different display modes through the <code>DisplayMode</code> parameter: <code>DataGridDisplayMode.Grid</code> (default) and
+    <code>DataGridDisplayMode.Table</code>. When set to <code>Grid</code>, the <code>GridTableColumns</code> parameter cam be used set specify column
+    widths in fractions. It basically provides an HTML table element with a <code>display: grid;</code> style. The <code>Table</code> mode uses standard
+    HTML table elements and rendering. Column widths in that mode are best specified through the <code>Width</code> parameter of the columns.
+</p>
+<p>
+    Specifically when using <code>Virtualize</code>, it is <strong>higly recommended</strong> to use the <code>Table</code> display mode as the <code>Grid</code> mode
+    can exhibit some odd behaviour when scrolling.
+</p>
+
 
 <h2 id="changeuistrings">Change strings used in the UI</h2>
 <p>

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

@@ -27,12 +27,12 @@
     </FluentAccordionItem>
 </FluentAccordion>
 <br />
-<div style="height: 370px; overflow:auto;" tabindex="-1">
+<div style="height: 484px; overflow:auto;" tabindex="-1">
     <FluentDataGrid @ref="dataGrid"
                     Items="foodRecallItems"
                     RefreshItems="RefreshItemsAsync"
                     OnRowDoubleClick="@(()=>DemoLogger.WriteLine("Row double clicked!"))"
-                    ItemSize="46"
+                    RowSize="DataGridRowSize.Small"
                     GenerateHeader="GenerateHeaderOption.Sticky"
                     TGridItem="FoodRecall"
                     Loading="loading"
@@ -88,6 +88,7 @@
 
         loading = false;
         await InvokeAsync(StateHasChanged);
+
     }
 
     public void ClearFilters()

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

@@ -1,5 +1,5 @@
 <div style="height: 400px; max-width: 800px; overflow-y: scroll;">
-    <FluentDataGrid @ref="grid" Items=@items Virtualize="true" ItemSize="54" GenerateHeader="@GenerateHeaderOption.Sticky">
+    <FluentDataGrid @ref="grid" Items=@items Virtualize="true" DisplayMode="DataGridDisplayMode.Table" Style="width: 100%;" ItemSize="54" GenerateHeader="@GenerateHeaderOption.Sticky">
         <ChildContent>
             <PropertyColumn Width="25%" Property="@(c => c.Item1)" Sortable="true" />
             <PropertyColumn Width="25%" Property="@(c => c.Item2)" />

examples/Demo/Shared/wwwroot/css/site.css

@@ -347,6 +347,7 @@ kbd {
 .loading-info {
     margin-top: 1em;
     text-align: center;
+    font-size: 1.5em;
 }
 
     .loading-info a {

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Components.Rendering
 @using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure
+@using System.Globalization
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 @typeparam TGridItem
@@ -200,13 +201,24 @@
 
     private void RenderEmptyContent(RenderTreeBuilder __builder)
     {
-        @if (_manualGrid)
+        if (_manualGrid)
         {
             return;
         }
 
+        string? style = null;
+        string? colspan = null;
+        if (DisplayMode == DataGridDisplayMode.Grid)
+        {
+            style = $"grid-column: 1 / {_columns.Count + 1}";
+        }
+        else
+        {
+            colspan = _columns.Count.ToString();
+        }
+
         <FluentDataGridRow Class="@EMPTY_CONTENT_ROW_CLASS" TGridItem="TGridItem">
-            <FluentDataGridCell Class="empty-content-cell" Style="@($"grid-column: 1 / {_columns.Count + 1}")">
+            <FluentDataGridCell Class="empty-content-cell" Style="@style" colspan="@colspan">
                 @if (EmptyContent is null)
                 {
                     @("No data to show!")
@@ -222,8 +234,19 @@
 
     private void RenderLoadingContent(RenderTreeBuilder __builder)
     {
+        string? style = null;
+        string? colspan = null;
+        if (DisplayMode == DataGridDisplayMode.Grid)
+        {
+            style = $"grid-column: 1 / {_columns.Count + 1}";
+        }
+        else
+        {
+            colspan = _columns.Count.ToString(CultureInfo.InvariantCulture);
+        }
+
         <FluentDataGridRow Class="@LOADING_CONTENT_ROW_CLASS" TGridItem="TGridItem">
-            <FluentDataGridCell Class="loading-content-cell" Style="@($"grid-column: 1 / {_columns.Count + 1}")">
+            <FluentDataGridCell Class="loading-content-cell" Style="@style" colspan="@colspan">
                 @if (LoadingContent is null)
                 {
                     <FluentStack HorizontalGap="3" HorizontalAlignment="@HorizontalAlignment.Center">

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

@@ -275,6 +275,13 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public bool AutoItemsPerPage { get; set; }
 
+    /// <summary>
+    /// Gets or set the <see cref="DataGridDisplayMode"/> of the grid.
+    /// Default is 'Grid'.
+    /// When set to Grid, <see cref="GridTemplateColumns" /> can be used to specify column widths.
+    /// When set to Table, widths need to be specified at the column level.
+    /// When using <see cref="Virtualize"/>, it is recommended to use Table.
+    /// </summary>
     [Parameter]
     public DataGridDisplayMode DisplayMode { get; set; } = DataGridDisplayMode.Grid;
 
@@ -759,6 +766,7 @@ private async Task RefreshDataCoreAsync()
         // TODO: Consider making this configurable, or smarter (e.g., doesn't delay on first call in a batch, then the amount
         // of delay increases if you rapidly issue repeated requests, such as when scrolling a long way)
         await Task.Delay(100);
+
         if (request.CancellationToken.IsCancellationRequested)
         {
             return default;
@@ -801,10 +809,9 @@ private async Task RefreshDataCoreAsync()
             // the virtualized start _index. It might be more performant just to have some _latestQueryRowStartIndex field, but we'd have
             // to make sure it doesn't get out of sync with the rows being rendered.
             return new ItemsProviderResult<(int, TGridItem)>(
-                 items: providerResult.Items.Select((x, i) => ValueTuple.Create(i + request.StartIndex + 2, x)),
-                 totalItemCount: _internalGridContext.TotalViewItemCount);
+                    items: providerResult.Items.Select((x, i) => ValueTuple.Create(i + request.StartIndex + 2, x)),
+                    totalItemCount: _internalGridContext.TotalViewItemCount);
         }
-
         return default;
     }
 
@@ -858,10 +865,11 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
 
     private string? StyleValue => new StyleBuilder(Style)
         .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid)
-        .AddStyle("grid-template-rows", "auto 1fr", _internalGridContext.Items.Count == 0 || Items is null)
-        .AddStyle("height", $"calc(100% - {(int)RowSize}px)", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue)
+        .AddStyle("grid-template-rows", "auto 1fr", (_internalGridContext.Items.Count == 0 || Items is null || EffectiveLoadingValue) && DisplayMode == DataGridDisplayMode.Grid)
+        .AddStyle("height", "100%", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue)
         .AddStyle("border-collapse", "separate", GenerateHeader == GenerateHeaderOption.Sticky)
         .AddStyle("border-spacing", "0", GenerateHeader == GenerateHeaderOption.Sticky)
+        .AddStyle("width", "100%", DisplayMode == DataGridDisplayMode.Table)
         .Build();
 
     private string? ColumnHeaderClass(ColumnBase<TGridItem> column)

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

@@ -68,14 +68,14 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("grid-column", GridColumn.ToString(), () => (!Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null)) || Grid.Virtualize)
+        .AddStyle("grid-column", GridColumn.ToString(), () => (!Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null)) || (Grid.Virtualize && Grid.DisplayMode == DataGridDisplayMode.Grid))
         .AddStyle("text-align", "center", Column is SelectColumn<TGridItem>)
         .AddStyle("align-content", "center", Column is SelectColumn<TGridItem>)
         .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn<TGridItem> && Owner.RowType == DataGridRowType.Default)
         .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn<TGridItem> && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
         .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)
         .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)
-        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
+        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default && Grid.DisplayMode == DataGridDisplayMode.Grid)
         .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)