[DataGrid] Alter rendering to use table elements

Directory.Build.props

@@ -12,8 +12,8 @@
 		<SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>
 		<AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
 
-		<VersionFile>4.10.3</VersionFile>
-		<VersionPrefix>4.10.3</VersionPrefix>
+		<VersionFile>4.11.0</VersionFile>
+		<VersionPrefix>4.11.0</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<AssemblyVersion>$(VersionFile)</AssemblyVersion>
 		<FileVersion>$(VersionFile)</FileVersion>

eng/pipelines/version.yml

@@ -2,5 +2,5 @@ variables:
   # File and Package version
   # dev  branch: 1.2.4-Preview-23282-1'    (PackageSuffix is always ignored in Dev branch)
   # main branch: 1.2.4-RC.1'               (PackageSuffix is ignored, if empty, in Main branch)
-  FileVersion: '4.10.3'   # Set the next final version here.
+  FileVersion: '4.11.0'   # Set the next final version here.
   PackageSuffix: ''

examples/Demo/Shared/Components/ApiDocumentation.razor

@@ -26,7 +26,7 @@
         string header = Properties.Any(x => x.IsParameter) ? "Parameters" : "Properties";
         <h4 id="@(_id + "_properties")">@header</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Properties.AsQueryable()" GridTemplateColumns="1fr 1fr 0.7fr 2fr">
+            <FluentDataGrid Items="@this.Properties.AsQueryable()" GridTemplateColumns="1fr 1fr 0.7fr 2fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <TemplateColumn Title="Type">
                     @context.Type
@@ -82,7 +82,7 @@
     {
         <h4 id="@(_id)_callbacks">EventCallbacks</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Events.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr">
+            <FluentDataGrid Items="@this.Events.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <PropertyColumn Property="@(c => c.Type)" />
                 <TemplateColumn Title="Description">
@@ -98,7 +98,7 @@
     {
         <h4 id="@(_id)_methods">Methods</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Methods.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr 1fr">
+            <FluentDataGrid Items="@this.Methods.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr 1fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <TemplateColumn Title="Parameters">
                     @foreach (var param in @context.Parameters)

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

@@ -1853,6 +1853,14 @@
              is small or if you are using pagination.
              </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OverscanCount">
+            <summary>
+            This is applicable only when using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Virtualize"/>. It defines how many additional items will be rendered
+            before and after the visible region to reduce rendering frequency during scrolling. While higher values can improve
+            scroll smoothness by rendering more items off-screen, they can also increase initial load times. Finding a balance
+            based on your data set size and user experience requirements is recommended. The default value is 3.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemSize">
             <summary>
             This is applicable only when using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Virtualize"/>. It defines an expected height in pixels for
@@ -1997,6 +2005,16 @@
             Sets <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
             </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.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.MultiLine">
+            <summary>
+            Gets or sets a value indicating whether the grid should allow multiple lines of text in cells.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SelectColumns">
             <summary>
             Gets the first (optional) SelectColumn
@@ -2157,7 +2175,7 @@
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> component.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.GridContext">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.InternalGridContext">
             <summary>
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/> component
             </summary>
@@ -2167,6 +2185,11 @@
             Gets a reference to the column that this cell belongs to.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.Grid">
+            <summary>
+            Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.HandleOnCellClickAsync">
             <summary />
         </member>
@@ -2196,11 +2219,16 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.Owner">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.InternalGridContext">
             <summary>
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/> component
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.Grid">
+            <summary>
+            Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.HandleOnRowClickAsync(System.String)">
             <summary />
         </member>
@@ -13383,6 +13411,32 @@
             Resize datagrid columns by exact pixel values
             </summary>
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize">
+            <summary>
+            The height of each <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
+            Values are in pixels.
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Small">
+            <summary>
+            Small row height (default)
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Medium">
+            <summary>
+            Medium row height
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Smaller">
+            <summary>
+            Smaller row height
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Large">
+            <summary>
+            Large row height
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowType">
             <summary>
             The type of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.

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

@@ -289,7 +289,7 @@ fluent-data-grid-row:has([row-selected]) {
 
 <DemoSection Title="Multiline text content" Component="@typeof(DataGridMultilineText)">
     <Description>
-        Example of using the <code>Class</code> parameter to style parts of the grid. Note that the class used in the example (<code>multiline-text</code>) has been added to the FluentDataGridCell css.
+        Set the grid parameter <code>MultiLine</code> to true when you have cells in your data that will take up more than a single line.
     </Description>
 </DemoSection>
 

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

@@ -3,7 +3,7 @@
 <FluentGrid Spacing="4">
     <FluentGridItem xs="12">
         <h4>With auto-fit</h4>
-        <FluentDataGrid Items="@people" AutoFit="true">
+        <FluentDataGrid Items="@people" Style="width: 100%;" AutoFit="true">
             <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
             <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
             <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />

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

@@ -10,51 +10,52 @@
 
 }
 
+
 <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>
-<FluentSpacer Width="25"/>
-<FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
+    <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>
+    <FluentSpacer Width="25" />
+    <FluentCheckbox @bind-Value="@_showActionsMenu" Label="Use menu for column actions" />
 </FluentToolbar>
-<FluentDataGrid Items="@FilteredItems"
-                ResizableColumns=true
-                ResizeType="@_resizeType"
-                HeaderCellAsButtonWithMenu="_showActionsMenu"
-                Pagination="@pagination"
-                TGridItem="Country"
-                OnRowFocus="HandleRowFocus"
-                GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
-                Style="height: 405px; overflow:auto;"
-                ShowHover="true">
-    <TemplateColumn Title="Rank" SortBy="@rankSort" Align="Align.Center">
-        <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
-    </TemplateColumn>
-    <PropertyColumn Property="@(c => c.Name)" InitialSortDirection=SortDirection.Descending Sortable="true" IsDefaultSortColumn=true Comparer="@StringLengthComparer.Instance" Filtered="!string.IsNullOrWhiteSpace(nameFilter)">
-        <ColumnOptions>
-            <div class="search-box">
-                <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
-            </div>
-        </ColumnOptions>
-    </PropertyColumn>
-    @* <TemplateColumn Title="Name" InitialSortDirection=SortDirection.Descending SortBy="@nameSort" IsDefaultSortColumn=true Filtered="!string.IsNullOrWhiteSpace(nameFilter)">
-        <ColumnOptions>
-            <div class="search-box">
+<div style="height: 400px; overflow-x:auto; display:flex;">
+    <FluentDataGrid Items="@FilteredItems"
+                    ResizableColumns=true
+                    ResizeType="@_resizeType"
+                    HeaderCellAsButtonWithMenu="_showActionsMenu"
+                    Pagination="@pagination"
+                    TGridItem="Country"
+                    OnRowFocus="HandleRowFocus"
+                    GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
+                    ShowHover="true">
+        <TemplateColumn Title="Rank" Sortable="true"  SortBy="@rankSort" Align="Align.Center">
+            <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
+        </TemplateColumn>
+        <PropertyColumn Property="@(c => c.Name)" InitialSortDirection=SortDirection.Descending Sortable="true" IsDefaultSortColumn=true Comparer="@StringLengthComparer.Instance" Filtered="!string.IsNullOrWhiteSpace(nameFilter)">
+            <ColumnOptions>
+                <div class="search-box">
+                    <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." />
+                </div>
+            </ColumnOptions>
+        </PropertyColumn>
+        @* <TemplateColumn Title="Name" InitialSortDirection=SortDirection.Descending SortBy="@nameSort" IsDefaultSortColumn=true Filtered="!string.IsNullOrWhiteSpace(nameFilter)">
+            <ColumnOptions>
+                <div class="search-box">
                 <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." />
-            </div>
-        </ColumnOptions>
-        <ChildContent>
-            @(context.Name)
-        </ChildContent>
-    </TemplateColumn> *@
-    <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" />
-    <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" />
-    <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.End" />
-    <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Align="Align.End" />
-</FluentDataGrid>
-
+                </div>
+            </ColumnOptions>
+            <ChildContent>
+                @(context.Name)
+            </ChildContent>
+        </TemplateColumn> *@
+        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" />
+        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" />
+        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.End" />
+        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Align="Align.End" />
+    </FluentDataGrid>
+</div>
 
 <FluentPaginator State="@pagination">
     <SummaryTemplate>

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

@@ -1,7 +1,7 @@
-<FluentDataGrid Items="@people">
+<FluentDataGrid Items="@people" MultiLine="true">
     <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
     <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
-    <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="multiline-text" />
+    <PropertyColumn Property="@(p => p.Description)" Sortable="true" />
 </FluentDataGrid>
 
 @code {
@@ -13,4 +13,4 @@
         new Person(10944, "António Langa", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
         new Person(11203, "Julie Smith","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
     }.AsQueryable();
-}
+}

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

@@ -1,5 +1,5 @@
 <div style="height: 400px; overflow-y: scroll;">
-    <FluentDataGrid @ref="grid" Items=@items GridTemplateColumns="1fr 1fr 1fr 1fr" Style="height: 100%;">
+    <FluentDataGrid @ref="grid" Items=@items GridTemplateColumns="1fr 1fr 1fr 1fr">
         <ChildContent>
             <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
             <PropertyColumn Property="@(c => c.Item2)" />
@@ -53,7 +53,7 @@
         grid?.SetLoadingState(true);
         items = null;
 
-        await Task.Delay(2500);
+        await Task.Delay(1500);
 
         items = GenerateSampleGridData(100);
         grid?.SetLoadingState(false);

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

@@ -4,7 +4,14 @@
 @inject NavigationManager NavManager
 
 <div style="height: 434px; overflow:auto;" tabindex="-1">
-    <FluentDataGrid style="height: 100%;" Loading="@(numResults == null)" ItemsProvider="foodRecallProvider" OnRowDoubleClick="@(()=>DemoLogger.WriteLine("Row double clicked!"))" Virtualize="true" ItemSize="46" GenerateHeader="GenerateHeaderOption.Sticky" TGridItem="FoodRecall" >
+    <FluentDataGrid Style="height: 100%;"
+                    Loading="@(numResults == null)"
+                    ItemsProvider="foodRecallProvider"
+                    OnRowDoubleClick="@(()=>DemoLogger.WriteLine("Row double clicked!"))"
+                    Virtualize="true"
+                    ItemSize="46"
+                    GenerateHeader="GenerateHeaderOption.Sticky"
+                    TGridItem="FoodRecall" >
         <PropertyColumn Title="ID" Property="@(c => c!.Event_Id)" />
         <PropertyColumn Property="@(c => c!.State)" Style="color: #af5f00 ;" />
         <PropertyColumn Property="@(c => c!.City)" />

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

@@ -3,7 +3,7 @@
         <FluentDataGrid Style="min-width: max-content;" Items="@people">
             <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
             <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
-            <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="multiline-text" />
+            <PropertyColumn Property="@(p => p.Description)" Sortable="true" Style="text-overflow: unset; overflow: visible;" />
         </FluentDataGrid>
     </div>
 </div>

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

@@ -1,6 +1,6 @@
 @inject DataSource Data
 
-<FluentDataGrid Items="@Data.People" style="width: 600px;">
+<FluentDataGrid Items="@Data.People" style="width: 600px;" RowSize="@DataGridRowSize.Medium">
     <TemplateColumn Title="Person" SortBy="@sortByName">
         <div class="flex items-center">
             <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.CountryCode.ToLower()).svg" alt="Flag of @(context.CountryCode)" />
@@ -28,4 +28,4 @@
     void Bonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a regular bonus";
 
     void DoubleBonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a double bonus";
-}
+}

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

@@ -1,5 +1,5 @@
 
-<FluentDataGrid id="defaultGrid" Items=RowsGrid.AsQueryable() GridTemplateColumns="1fr 1fr" TGridItem=SampleGridData OnRowFocus="HandleRowFocus" OnCellFocus="HandleCellFocus">
+<FluentDataGrid id="defaultGrid" Items=RowsGrid.AsQueryable() GridTemplateColumns="1fr 1fr" TGridItem=SampleGridData OnRowClick="HandleRowClick" OnCellClick="HandleCellClick">
     <TemplateColumn Title="Name">
         <FluentTextField @bind-Value="@context!.Name"/>
     </TemplateColumn>
@@ -14,7 +14,7 @@
     {
         public string Name { get; set; }
         public int Age { get; set; }
-        
+
         public SampleGridData(string name, int age)
         {
             Name = name;
@@ -30,12 +30,12 @@
         new SampleGridData("Bob", 20 )
     };
 
-    private void HandleRowFocus(FluentDataGridRow<SampleGridData> row)
+    private void HandleRowClick(FluentDataGridRow<SampleGridData> row)
     {
         DemoLogger.WriteLine($"Row focused: {row.RowIndex}");
     }
 
-    private void HandleCellFocus(FluentDataGridCell<SampleGridData> cell)
+    private void HandleCellClick(FluentDataGridCell<SampleGridData> cell)
     {
         DemoLogger.WriteLine($"Cell focused: {cell.GridColumn}");
     }