Fix #3160 (#3166)

microsoft · Jan 13, 2025 · 479ab25 · 479ab25
1 parent 7052016
commit 479ab25
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 4 deletions.
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -205,7 +205,7 @@
             return;
         }
 
-        <FluentDataGridRow TGridItem="TGridItem">
+        <FluentDataGridRow Class="@EMPTY_CONTENT_ROW_CLASS" TGridItem="TGridItem">
             <FluentDataGridCell Class="empty-content-cell" Style="@($"grid-column: 1 / {_columns.Count + 1}")">
                 @if (EmptyContent is null)
                 {
@@ -222,7 +222,7 @@
 
     private void RenderLoadingContent(RenderTreeBuilder __builder)
     {
-        <FluentDataGridRow TGridItem="TGridItem">
+        <FluentDataGridRow Class="@LOADING_CONTENT_ROW_CLASS" TGridItem="TGridItem">
             <FluentDataGridCell Class="loading-content-cell" Style="@($"grid-column: 1 / {_columns.Count + 1}")">
                 @if (LoadingContent is null)
                 {

diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -22,6 +22,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEvent, IAsyncDisposable
 {
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js";
+    public const string EMPTY_CONTENT_ROW_CLASS = "empty-content-row";
+    public const string LOADING_CONTENT_ROW_CLASS = "loading-content-row";
 
     /// <summary />
     [Inject]

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -77,7 +77,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .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 && CellType == DataGridCellType.ColumnHeader)
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
-        .AddStyle("height", "100%", InternalGridContext.TotalItemCount == 0 || (Grid.EffectiveLoadingValue && Grid.Items is null) || Grid.MultiLine)
+        .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
         .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column!.Sortable.HasValue && !Column!.Sortable.Value)))
         .AddStyle(Owner.Style)

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css
@@ -33,6 +33,7 @@ td {
     font-weight: 600;
     text-align: center;
     height: 100%;
+    user-select: none;
 }
 
 .multiline-text {

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
@@ -106,6 +106,11 @@ internal async Task HandleOnRowClickAsync(string rowId)
     {
         var row = GetRow(rowId);
 
+        if (row is not null && !string.IsNullOrWhiteSpace(row.Class) && (row.Class.Contains(FluentDataGrid<TGridItem>.EMPTY_CONTENT_ROW_CLASS) || row.Class.Contains(FluentDataGrid<TGridItem>.LOADING_CONTENT_ROW_CLASS)))
+        {
+            return;
+        }
+
         if (row != null && Grid.OnRowClick.HasDelegate)
         {
             await Grid.OnRowClick.InvokeAsync(row);

diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.css b/src/Core/Components/DataGrid/FluentDataGridRow.razor.css
@@ -2,7 +2,7 @@
     z-index: 3;
 }
 
-.hover:not([row-type='header'],[row-type='sticky-header'],.loading-content-row):hover ::deep td {
+.hover:not([row-type='header'],[row-type='sticky-header'],.loading-content-row):hover ::deep td:not(.empty-content-cell) {
     cursor: pointer;
     background-color: var(--datagrid-hover-color, var(--neutral-fill-stealth-hover));
 }