From 57ce3db9e9bf5273199ee917af12e1e259011268 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 19 Dec 2024 16:31:55 +0100 Subject: [PATCH] [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 --- src/Core/Components/DataGrid/FluentDataGrid.razor | 2 +- src/Core/Components/DataGrid/FluentDataGrid.razor.cs | 6 +++--- src/Core/Components/DataGrid/FluentDataGrid.razor.css | 1 + .../Components/DataGrid/FluentDataGridCell.razor.css | 5 ----- src/Core/Components/DataGrid/FluentDataGridRow.razor | 1 + .../Components/DataGrid/FluentDataGridRow.razor.cs | 1 + ...sts_SortByColumnIndex_Ascending.verified.razor.html | 10 +++++----- ...ts_SortByColumnIndex_Descending.verified.razor.html | 10 +++++----- ...sts_SortByColumnTitle_Ascending.verified.razor.html | 10 +++++----- ...ts_SortByColumnTitle_Descending.verified.razor.html | 10 +++++----- ...ultiSelect_Customized_Rendering.verified.razor.html | 10 +++++----- ...lumSelect_MultiSelect_Rendering.verified.razor.html | 10 +++++----- ...umSelect_SingleSelect_Rendering.verified.razor.html | 10 +++++----- ...ridTests.FluentDataGrid_Default.verified.razor.html | 8 ++++---- 14 files changed, 46 insertions(+), 48 deletions(-) diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 1a2a073698..526b2c29a9 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -33,7 +33,7 @@ headerType = DataGridRowType.StickyHeader; } - + @_renderColumnHeaders diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 9036b69197..b0316dd056 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -812,8 +812,8 @@ private string AriaSortValue(ColumnBase 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 index 1122bec7ed..66526d175e 100644 --- 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 index b7285afe0e..40937ac23e 100644 --- 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 index ab842f60d2..0b8bee082e 100644 --- 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 index 10fb0db41c..6779c14417 100644 --- a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs @@ -64,6 +64,7 @@ public partial class FluentDataGridRow : FluentComponentBase, IHandle protected FluentDataGrid Grid => InternalGridContext.Grid; protected string? ClassValue => new CssBuilder(Class) + .AddClass("fluent-data-grid-row") .AddClass("hover", when: Grid.ShowHover) .Build(); diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html index 668b64c43d..f0c38b739f 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html @@ -1,7 +1,7 @@ - + - + - + - + - + diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html index 59121cb255..04fe499f44 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html @@ -1,7 +1,7 @@
Item1
@@ -15,19 +15,19 @@
A D
B C
C B
D A
- + - + - + - + - + diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html index 668b64c43d..f0c38b739f 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html @@ -1,7 +1,7 @@
Item1
@@ -15,19 +15,19 @@
D A
C B
B C
A D
- + - + - + - + - + diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html index 59121cb255..04fe499f44 100644 --- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html +++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html @@ -1,7 +1,7 @@
Item1
@@ -15,19 +15,19 @@
A D
B C
C B
D A
- + - + - + - + - + diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html index 6bd3fb6c69..636cd23adb 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html @@ -1,7 +1,7 @@
Item1
@@ -15,19 +15,19 @@
D A
C B
B C
A D
- + @@ -13,18 +13,18 @@ - + - + - + -
➖
Jean Martin
✅ Kenji Sato
✅ Julie Smith
+ \ No newline at end of file diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html index 45c4837ee9..dd1b2b2481 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html @@ -1,7 +1,7 @@ - + - + - + - + -
Jean Martin
Kenji Sato
+ \ No newline at end of file diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html index d59aed3707..e3f40de08b 100644 --- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html @@ -1,7 +1,7 @@ - + - + - + - + -
@@ -11,7 +11,7 @@
Jean Martin
Kenji Sato
+ \ No newline at end of file diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html index 15f37cb1c5..e24eadbd7a 100644 --- a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html +++ b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html @@ -1,7 +1,7 @@ - + - + - + - +
Name
@@ -10,13 +10,13 @@
Denis Voituron
Vincent Baaij
Bill Gates