[Blazor] Add OnRowClick EventCallback to QuickGrid (#64602)

* Add OnRowClick EventCallback to QuickGrid

This change adds an OnRowClick parameter to QuickGrid that allows users to handle row click events. When the OnRowClick delegate is set:

- The row receives a 'row-clickable' CSS class
- A cursor: pointer style is applied via scoped CSS
- Clicking the row invokes the callback with the row item

Fixes #44899

* Add OnRowClick EventCallback to QuickGrid (#64606)

* Initial plan

* Fix RowClassApplied test and consolidate RenderRow logic

Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>

* Fix trailing space in combinedClass when rowClass is null

Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>

* Simplify QuickGrid OnRowClick rendering by removing conditional duplication (#64621)

* Initial plan

* Simplify RenderRow by removing if/else and coalescing OnRowClick callback

Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: javiercn

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt

@@ -1 +1,3 @@
 #nullable enable
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.OnRowClick.get -> Microsoft.AspNetCore.Components.EventCallback<TGridItem>
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.OnRowClick.set -> void

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor

@@ -66,7 +66,15 @@
     private void RenderRow(RenderTreeBuilder __builder, int rowIndex, TGridItem item)
     {
         var rowClass = RowClass?.Invoke(item);
-        <tr @key="@(ItemKey(item))" aria-rowindex="@rowIndex" class="@rowClass">
+        var combinedClass = OnRowClick.HasDelegate
+            ? string.IsNullOrEmpty(rowClass) ? "row-clickable" : $"row-clickable {rowClass}"
+            : rowClass;
+        var rowClick = OnRowClick.HasDelegate ? EventCallback.Factory.Create<MouseEventArgs>(this, () => OnRowClick.InvokeAsync(item)) : default;
+
+        <tr @key="@(ItemKey(item))"
+            aria-rowindex="@rowIndex"
+            class="@combinedClass"
+            @onclick="@rowClick">
             @foreach (var col in _columns)
             {
                 <td class="@ColumnClass(col)" @key="@col">@{ col.CellContent(__builder, item); }</td>

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs

@@ -109,6 +109,11 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
     /// </summary>
     [Parameter] public Func<TGridItem, string?>? RowClass { get; set; }
 
+    /// <summary>
+    /// Optional. A callback that is invoked when a row is clicked.
+    /// </summary>
+    [Parameter] public EventCallback<TGridItem> OnRowClick { get; set; }
+
     [Inject] private IServiceProvider Services { get; set; } = default!;
     [Inject] private IJSRuntime JS { get; set; } = default!;
 

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css

@@ -116,3 +116,8 @@ html[dir=rtl] .col-justify-end .col-options {
     right: unset;
     left: 0;
 }
+
+/* Clickable rows when OnRowClick is set */
+tr.row-clickable {
+    cursor: pointer;
+}

src/Components/test/E2ETest/Tests/QuickGridTest.cs

@@ -136,11 +136,11 @@ public void RowClassApplied()
             if (firstName == "Julie")
             {
                 isJulieRowFound = true;
-                Assert.Equal("highlight", row.GetDomAttribute("class"));
+                Assert.Equal("row-clickable highlight", row.GetDomAttribute("class"));
             }
             else
             {
-                Assert.Null(row.GetDomAttribute("class"));
+                Assert.Equal("row-clickable", row.GetDomAttribute("class"));
             }
         }
 
@@ -215,4 +215,43 @@ public void ItemsProviderCalledOnceWithVirtualize()
         app = Browser.MountTestComponent<QuickGridVirtualizeComponent>();
         Browser.Equal("1", () => app.FindElement(By.Id("items-provider-call-count")).Text);
     }
+
+    [Fact]
+    public void OnRowClickTriggersCallback()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+
+        // Verify no row has been clicked yet
+        Browser.Exists(By.Id("no-click"));
+
+        // Click on the first row (Julie Smith)
+        var firstRow = grid.FindElement(By.CssSelector("tbody > tr:nth-child(1)"));
+        firstRow.Click();
+
+        // Verify the callback was triggered with correct data
+        Browser.Equal("PersonId: 11203", () => app.FindElement(By.Id("clicked-person-id")).Text);
+        Browser.Equal("Name: Julie Smith", () => app.FindElement(By.Id("clicked-person-name")).Text);
+        Browser.Equal("Click count: 1", () => app.FindElement(By.Id("click-count")).Text);
+
+        // Click on another row (Jose Hernandez - 3rd row)
+        var thirdRow = grid.FindElement(By.CssSelector("tbody > tr:nth-child(3)"));
+        thirdRow.Click();
+
+        // Verify the callback was triggered with the new row's data
+        Browser.Equal("PersonId: 11898", () => app.FindElement(By.Id("clicked-person-id")).Text);
+        Browser.Equal("Name: Jose Hernandez", () => app.FindElement(By.Id("clicked-person-name")).Text);
+        Browser.Equal("Click count: 2", () => app.FindElement(By.Id("click-count")).Text);
+    }
+
+    [Fact]
+    public void OnRowClickAppliesCursorPointerStyle()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+
+        // Verify the row has cursor: pointer style via the row-clickable class
+        var cursorStyle = Browser.ExecuteJavaScript<string>(@"
+            const row = document.querySelector('#grid > table > tbody > tr:nth-child(1)');
+            return row ? getComputedStyle(row).cursor : null;");
+        Assert.Equal("pointer", cursorStyle);
+    }
 }

src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor

@@ -3,7 +3,7 @@
 <h3>Sample QuickGrid Component</h3>
 
 <div id="grid">
-    <QuickGrid @ref="@quickGridRef" Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" custom-attrib="somevalue" class="custom-class-attrib">
+    <QuickGrid @ref="@quickGridRef" Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" OnRowClick="@((Person p) => HandleRowClick(p))" custom-attrib="somevalue" class="custom-class-attrib">
         <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
         <PropertyColumn Property="@(p => p.FirstName)" Sortable="true">
             <ColumnOptions>
@@ -20,11 +20,32 @@
 </div>
 <Paginator State="@pagination" />
 
+<div id="clicked-row-info">
+    @if (clickedPerson is not null)
+    {
+        <p id="clicked-person-id">PersonId: @clickedPerson.PersonId</p>
+        <p id="clicked-person-name">Name: @clickedPerson.FirstName @clickedPerson.LastName</p>
+        <p id="click-count">Click count: @clickCount</p>
+    }
+    else
+    {
+        <p id="no-click">No row clicked yet</p>
+    }
+</div>
+
 @code {
     record Person(int PersonId, string FirstName, string LastName, DateOnly BirthDate);
     PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
     string firstNameFilter;
     QuickGrid<Person> quickGridRef;
+    Person clickedPerson;
+    int clickCount;
+
+    void HandleRowClick(Person person)
+    {
+        clickedPerson = person;
+        clickCount++;
+    }
 
     int ComputeAge(DateOnly birthDate)
         => DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);