Pass through arbitrary attributes to QuickGrid (#50051)

Co-authored-by: James Yeung <shunjiey@hotmail.com>

Author: SteveSandersonMS

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Microsoft.AspNetCore.Components.QuickGrid.csproj

@@ -15,6 +15,8 @@
     <!-- Bundle the theme CSS files as if they were scoped, even though they aren't -->
     <ThemeCssFiles Include="Themes\*.css" />
     <_CurrentProjectDiscoveredScopedCssFiles Include="@(ThemeCssFiles)" RelativePath="%(Identity)" BasePath="_content/$(AssemblyName)" />
+
+    <Compile Include="$(ComponentsSharedSourceRoot)src\AttributeUtilities.cs" LinkBase="Infrastructure" />
   </ItemGroup>
 
   <ItemGroup>

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

@@ -115,6 +115,8 @@ Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Theme.get -> stri
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Theme.set -> void
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Virtualize.get -> bool
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Virtualize.set -> void
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.AdditionalAttributes.get -> System.Collections.Generic.IReadOnlyDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.AdditionalAttributes.set -> void
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection.Ascending = 1 -> Microsoft.AspNetCore.Components.QuickGrid.SortDirection
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection.Auto = 0 -> Microsoft.AspNetCore.Components.QuickGrid.SortDirection

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

@@ -10,7 +10,7 @@
         @{ FinishCollectingColumns(); }
         <ColumnsCollectedNotifier TGridItem="TGridItem" />
 
-        <table class="@GridClass()" theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptions">
+        <table theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptions" @attributes="AdditionalAttributes" class="@GridClass()">
             <thead>
                 <tr>
                     @_renderColumnHeaders
@@ -39,7 +39,7 @@
     private void RenderNonVirtualizedRows(RenderTreeBuilder __builder)
     {
         var initialRowIndex = 2; // aria-rowindex is 1-based, plus the first row is the header
-        var rowIndex = initialRowIndex; 
+        var rowIndex = initialRowIndex;
         foreach (var item in _currentNonVirtualizedViewItems)
         {
             RenderRow(__builder, rowIndex++, item);

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

@@ -5,6 +5,7 @@
 using Microsoft.AspNetCore.Components.QuickGrid.Infrastructure;
 using Microsoft.AspNetCore.Components.Web.Virtualization;
 using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components.Forms;
 
 namespace Microsoft.AspNetCore.Components.QuickGrid;
 
@@ -90,6 +91,11 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
     /// </summary>
     [Parameter] public PaginationState? Pagination { get; set; }
 
+    /// <summary>
+    /// Gets or sets a collection of additional attributes that will be applied to the created element.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
     [Inject] private IServiceProvider Services { get; set; } = default!;
     [Inject] private IJSRuntime JS { get; set; } = default!;
 
@@ -387,7 +393,10 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
         : ColumnClass(column);
 
     private string GridClass()
-        => $"quickgrid {Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}";
+    {
+        var gridClass = $"quickgrid {Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}";
+        return AttributeUtilities.CombineClassNames(AdditionalAttributes, gridClass) ?? string.Empty;
+    }
 
     private static string? ColumnClass(ColumnBase<TGridItem> column) => column.Align switch
     {

…ents/Web/src/Forms/AttributeUtilities.cs …ponents/Shared/src/AttributeUtilities.cssrc/Components/Web/src/Forms/AttributeUtilities.cs renamed to src/Components/Shared/src/AttributeUtilities.cs src/Components/Web/src/Forms/AttributeUtilities.cs renamed to src/Components/Shared/src/AttributeUtilities.cs

@@ -13,6 +13,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <Compile Include="$(ComponentsSharedSourceRoot)src\AttributeUtilities.cs" LinkBase="Forms" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ExpressionFormatting\**\*.cs" LinkBase="Forms\ExpressionFommatting" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\DefaultAntiforgeryStateProvider.cs" LinkBase="Forms" />
   </ItemGroup>

src/Components/Web/src/Microsoft.AspNetCore.Components.Web.csproj

@@ -113,4 +113,12 @@ public void PaginatorDisplaysCorrectItemCount()
         Assert.Equal("1", currentPageNumber);
         Assert.Equal("5", totalPageNumber);
     }
+
+    [Fact]
+    public void AdditionalAttributesApplied()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+        Assert.Equal("somevalue", grid.GetAttribute("custom-attrib"));
+        Assert.Contains("custom-class-attrib", grid.GetAttribute("class")?.Split(" "));
+    }
 }

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

@@ -3,7 +3,7 @@
 <h3>Sample QuickGrid Component</h3>
 
 <div id="grid">
-    <QuickGrid Items="@FilteredPeople" Pagination="@pagination">
+    <QuickGrid Items="@FilteredPeople" Pagination="@pagination" custom-attrib="somevalue" class="custom-class-attrib">
         <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
         <PropertyColumn Property="@(p => p.firstName)" Sortable="true">
                 <ColumnOptions>