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

examples/Demo/Shared/Pages/Lab/IssueTester3102.razor

@@ -0,0 +1,86 @@
+@using Microsoft.FluentUI.AspNetCore.Components
+
+<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">
+
+        <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Item2)" />
+        <PropertyColumn Property="@(c => c.Item3)" Align="Align.Center" />
+        <PropertyColumn Property="@(c => c.Item4)" Align="Align.End" />
+
+        <PropertyColumn Property="@(c => c.Item5)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Item6)" />
+        <PropertyColumn Property="@(c => c.Item8)" Align="Align.End" />
+        <PropertyColumn Property="@(c => c.Item7)" Align="Align.Center" />
+
+        <PropertyColumn Property="@(c => c.Item9)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Item10)" />
+        <PropertyColumn Property="@(c => c.Item11)" Align="Align.Center" />
+        <PropertyColumn Property="@(c => c.Item12)" Align="Align.End" />
+
+        <PropertyColumn Property="@(c => c.Item13)" Sortable="true" />
+        <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;
+
+    bool _clearItems = false;
+    public record SampleGridData(string Item1, string Item2, string Item3, string Item4,
+                                 string Item5, string Item6, string Item7, string Item8,
+                                 string Item9, string Item10, string Item11, string Item12,
+                                 string Item13, string Item14, string Item15, string Item16);
+
+    IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable();
+
+    private IQueryable<SampleGridData> GenerateSampleGridData(int size)
+    {
+        SampleGridData[] data = new SampleGridData[size];
+
+        for (int i = 0; i < size; i++)
+        {
+            data[i] = new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4",
+                        $"value {i}-5", $"value {i}-6", $"value {i}-7", $"value {i}-8",
+                        $"value {i}-9", $"value {i}-10", $"value {i}-11", $"value {i}-12",
+                        $"value {i}-13", $"value {i}-14", $"value {i}-15", $"value {i}-16");
+        }
+        return data.AsQueryable();
+    }
+    protected override void OnInitialized()
+    {
+        items = GenerateSampleGridData(5000);
+    }
+
+    private void ToggleItems()
+    {
+        if (_clearItems)
+        {
+            items = Enumerable.Empty<SampleGridData>().AsQueryable();
+        }
+        else
+        {
+            items = GenerateSampleGridData(5000);
+        }
+    }
+
+    private async Task SimulateDataLoading()
+    {
+        _clearItems = false;
+
+        items = Enumerable.Empty<SampleGridData>().AsQueryable();
+        //grid?.SetLoadingState(true);
+
+        await Task.Delay(1500);
+
+        items = GenerateSampleGridData(5000);
+        //grid?.SetLoadingState(false);
+    }
+}

examples/Demo/Shared/Pages/Lab/IssueTesterPage.razor

@@ -6,6 +6,5 @@
 
 <DemoSection Component="typeof(IssueTester)" Title="Testbed for issues reported on GH" />
 
-@code {
+<DemoSection Component="typeof(IssueTester3102)" Title="Issue 3102" />
 
-}

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -59,7 +59,8 @@
                                         OverscanCount="@OverscanCount"
                                         ItemsProvider="@ProvideVirtualizedItemsAsync"
                                         ItemContent="@(item => builder => RenderRow(builder, item.RowIndex, item.Data))"
-                                        Placeholder="@(placeholderContext => builder => RenderPlaceholderRow(builder, placeholderContext))" />
+                                        Placeholder="@(placeholderContext => builder => RenderPlaceholderRow(builder, placeholderContext))"
+                                        SpacerElement="tr"/>
                         }
                     }
                     else

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

@@ -1,6 +1,5 @@
 .fluent-data-grid {
     width: auto;
-    flex: 1;
     display: grid;
     border-collapse: collapse;
     align-items: center;

src/Core/Components/DataGrid/FluentDataGridRow.razor

@@ -7,7 +7,7 @@
         style="@StyleValue"
         data-row-index=@RowIndex
         role="row"
-        row-type="@RowType.ToAttributeValue()"
+        row-type="@(RowType != DataGridRowType.Default ? RowType.ToAttributeValue() : null)"
         @onkeydown="@(e => HandleOnRowKeyDownAsync(RowId, e))"
         @onclick="@(e => HandleOnRowClickAsync(RowId))"
         @ondblclick="@(e => HandleOnRowDoubleClickAsync(RowId))"

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html

@@ -15,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" row-type="default" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="2" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" row-type="default" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="3" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" row-type="default" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="4" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" b-upi3f9mbnn="">
+    <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>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html

@@ -15,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="2" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" row-type="default" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="3" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" row-type="default" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="4" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" row-type="default" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="5" b-upi3f9mbnn="">
+    <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>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html

@@ -15,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" row-type="default" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="2" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" row-type="default" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="3" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" row-type="default" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="4" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" b-upi3f9mbnn="">
+    <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>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html

@@ -15,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="2" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="5" role="row" row-type="default" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="3" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" row-type="default" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="4" b-upi3f9mbnn="">
+    <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>
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" row-type="default" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="5" b-upi3f9mbnn="">
+    <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>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html

@@ -13,16 +13,16 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr class="fluent-data-grid-row" data-row-index="2" role="row" row-type="default" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="2" b-upi3f9mbnn="">
+    <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="2" b-upi3f9mbnn="">
       <td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="24" blazor:onclick="25" b-w6qdxfylwy="">
       </td>
       <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="26" blazor:onclick="27" b-w6qdxfylwy="">Jean Martin</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="3" role="row" row-type="default" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="3" b-upi3f9mbnn="">
+    <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="3" b-upi3f9mbnn="">
       <td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="28" blazor:onclick="29" b-w6qdxfylwy="">✅</td>
       <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="30" blazor:onclick="31" b-w6qdxfylwy="">Kenji Sato</td>
     </tr>
-    <tr class="fluent-data-grid-row" data-row-index="4" role="row" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="4" b-upi3f9mbnn="">
+    <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="4" b-upi3f9mbnn="">
       <td col-index="1" class="col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-inline-start: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px); padding-top: calc(var(--design-unit) * 1.5px); height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="32" blazor:onclick="33" b-w6qdxfylwy="">✅</td>
       <td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="34" blazor:onclick="35" b-w6qdxfylwy="">Julie Smith</td>
     </tr>