Add QuickGrid RowClass parameter (#59901)

Add an API to QuickGrid for adding a class to a table row based on the item for the row. Fixes #45477
dotnet · Jan 16, 2025 · 6a60ce0 · 6a60ce0
1 parent dc2a6fe
commit 6a60ce0
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 8 deletions.
diff --git a/...omponents/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt b/...omponents/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt
@@ -1 +1,3 @@
 #nullable enable
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.get -> System.Func<TGridItem, string?>?
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.set -> void
diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor
@@ -65,7 +65,8 @@
 
     private void RenderRow(RenderTreeBuilder __builder, int rowIndex, TGridItem item)
     {
-        <tr @key="@(ItemKey(item))" aria-rowindex="@rowIndex">
+        var rowClass = RowClass?.Invoke(item);
+        <tr @key="@(ItemKey(item))" aria-rowindex="@rowIndex" class="@rowClass">
             @foreach (var col in _columns)
             {
                 <td class="@ColumnClass(col)" @key="@col">@{ col.CellContent(__builder, item); }</td>

diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs
@@ -104,6 +104,11 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
 
+    /// <summary>
+    /// Optional. A callback to be invoked for each rendered row to specify a CSS class.
+    /// </summary>
+    [Parameter] public Func<TGridItem, string?>? RowClass { get; set; }
+
     [Inject] private IServiceProvider Services { get; set; } = default!;
     [Inject] private IJSRuntime JS { get; set; } = default!;
 

diff --git a/src/Components/test/E2ETest/Tests/QuickGridTest.cs b/src/Components/test/E2ETest/Tests/QuickGridTest.cs
@@ -121,4 +121,31 @@ public void AdditionalAttributesApplied()
         Assert.Equal("somevalue", grid.GetDomAttribute("custom-attrib"));
         Assert.Contains("custom-class-attrib", grid.GetDomAttribute("class")?.Split(" "));
     }
+
+    [Fact]
+    public void RowClassApplied()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        var rows = grid.FindElements(By.CssSelector("tbody > tr"));
+
+        bool isJulieRowFound = false;
+        foreach (var row in rows)
+        {
+            var firstName = row.FindElement(By.CssSelector("td:nth-child(2)")).Text;
+            if (firstName == "Julie")
+            {
+                isJulieRowFound = true;
+                Assert.Equal("highlight", row.GetDomAttribute("class"));
+            }
+            else
+            {
+                Assert.Null(row.GetDomAttribute("class"));
+            }
+        }
+
+        if (!isJulieRowFound)
+        {
+            Assert.Fail("No row found for Julie to highlight.");
+        }
+    }
 }
diff --git a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor
@@ -3,15 +3,15 @@
 <h3>Sample QuickGrid Component</h3>
 
 <div id="grid">
-    <QuickGrid Items="@FilteredPeople" Pagination="@pagination" custom-attrib="somevalue" class="custom-class-attrib">
+    <QuickGrid Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" custom-attrib="somevalue" class="custom-class-attrib">
         <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
         <PropertyColumn Property="@(p => p.firstName)" Sortable="true">
-                <ColumnOptions>
-                    <div class="search-box">
-                        <input type="search" autofocus @bind="firstNameFilter" @bind:event="oninput" placeholder="First name..." />
-                    </div>
-                </ColumnOptions>
-         </PropertyColumn>
+            <ColumnOptions>
+                <div class="search-box">
+                    <input type="search" autofocus @bind="firstNameFilter" @bind:event="oninput" placeholder="First name..." />
+                </div>
+            </ColumnOptions>
+        </PropertyColumn>
         <PropertyColumn Property="@(p => p.lastName)" Sortable="true" />
         <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
         <PropertyColumn Title="Age in years" Property="@(p => ComputeAge(p.BirthDate))" Sortable="true"/>
@@ -27,6 +27,8 @@
     int ComputeAge(DateOnly birthDate)
         => DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);
 
+    string HighlightJulie(Person person) => person.firstName == "Julie" ? "highlight" : null;
+
     IQueryable<Person> FilteredPeople
     {
         get