[DataGrid] Some rendering changes and fixes (#3024)

* Tweak DataGrid classes etc based on tests with Aspire * Update test after DataGrid rendering adjustments * Remove unused class from CSS * Fix test * Process review comments
microsoft · Dec 19, 2024 · 57ce3db · 57ce3db
1 parent 5d8c97d
commit 57ce3db
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 48 deletions.
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -33,7 +33,7 @@
                     headerType = DataGridRowType.StickyHeader;
                 }
                 <thead>
-                    <FluentDataGridRow RowType="@headerType" TGridItem="TGridItem" row-type="@headerType.ToAttributeValue()">
+                    <FluentDataGridRow RowType="@headerType" TGridItem="TGridItem" >
                         @_renderColumnHeaders
                     </FluentDataGridRow>
                 </thead>

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -812,8 +812,8 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
 
     private string? GridClass()
     {
-        return new CssBuilder("fluent-data-grid")
-            .AddClass(Class)
+        return new CssBuilder(Class)
+            .AddClass("fluent-data-grid")
             .AddClass("auto-fit", AutoFit)
             .AddClass("loading", _pendingDataLoadCancellationTokenSource is not null)
             .Build();
@@ -877,7 +877,7 @@ private void LoadStateFromQueryString(string queryString)
         var query = System.Web.HttpUtility.ParseQueryString(queryString);
         if (query.AllKeys.Contains($"{SaveStatePrefix}orderby"))
         {
-            var orderBy = query[$"{SaveStatePrefix}orderby"]!.Split(' ',2);
+            var orderBy = query[$"{SaveStatePrefix}orderby"]!.Split(' ', 2);
             var title = orderBy[0];
 
             var column = _columns.FirstOrDefault(c => c.Title == title);

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css
@@ -5,6 +5,7 @@
     border-collapse: collapse;
     align-items: center;
     height: max-content;
+    margin-bottom: 0px;
 }
 
 thead,

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css
@@ -42,11 +42,6 @@ td {
     align-content: start;
 }
 
-::deep .col-header-content {
-    display: flex;
-    flex-grow: 1;
-}
-
 .column-header {
     font-weight: 600;
     position: relative;

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor b/src/Core/Components/DataGrid/FluentDataGridRow.razor
@@ -7,6 +7,7 @@
         style="@StyleValue"
         data-row-index=@RowIndex
         role="row"
+        row-type="@RowType.ToAttributeValue()"
         @onkeydown="@(e => HandleOnRowKeyDownAsync(RowId, e))"
         @onclick="@(e => HandleOnRowClickAsync(RowId))"
         @ondblclick="@(e => HandleOnRowDoubleClickAsync(RowId))"

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
@@ -64,6 +64,7 @@ public partial class FluentDataGridRow<TGridItem> : FluentComponentBase, IHandle
     protected FluentDataGrid<TGridItem> Grid => InternalGridContext.Grid;
 
     protected string? ClassValue => new CssBuilder(Class)
+        .AddClass("fluent-data-grid-row")
         .AddClass("hover", when: Grid.ShowHover)
         .Build();
 

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="">
   <thead b-ppmhrkw1mj="">
-    <tr data-row-index="0" role="row" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" row-type="header" 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" b-upi3f9mbnn="">
       <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" 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,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr data-row-index="3" role="row" 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" row-type="default" 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 data-row-index="2" role="row" 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" row-type="default" 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 data-row-index="5" role="row" 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" row-type="default" 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 data-row-index="4" role="row" 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" row-type="default" 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>

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="">
   <thead b-ppmhrkw1mj="">
-    <tr data-row-index="0" role="row" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" row-type="header" 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" b-upi3f9mbnn="">
       <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" 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,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr data-row-index="4" role="row" 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" row-type="default" 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 data-row-index="5" role="row" 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" row-type="default" 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 data-row-index="2" role="row" 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" row-type="default" 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 data-row-index="3" role="row" 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" row-type="default" 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>

diff --git a/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/...d/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_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="">
   <thead b-ppmhrkw1mj="">
-    <tr data-row-index="0" role="row" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" row-type="header" 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" b-upi3f9mbnn="">
       <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px;" 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,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr data-row-index="3" role="row" 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" row-type="default" 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 data-row-index="2" role="row" 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" row-type="default" 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 data-row-index="5" role="row" 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" row-type="default" 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 data-row-index="4" role="row" 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" row-type="default" 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>

diff --git a/.../DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/.../DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_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="">
   <thead b-ppmhrkw1mj="">
-    <tr data-row-index="0" role="row" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" row-type="header" 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" b-upi3f9mbnn="">
       <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px;" 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,19 +15,19 @@
     </tr>
   </thead>
   <tbody b-ppmhrkw1mj="">
-    <tr data-row-index="4" role="row" 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" row-type="default" 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 data-row-index="5" role="row" 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" row-type="default" 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 data-row-index="2" role="row" 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" row-type="default" 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 data-row-index="3" role="row" 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" row-type="default" 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>