Skip to content

Commit 9dc2469

Browse files
danroth27captainsafia
authored andcommitted
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
1 parent 918b331 commit 9dc2469

File tree

5 files changed

+45
-8
lines changed

5 files changed

+45
-8
lines changed
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
#nullable enable
2+
Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.get -> System.Func<TGridItem, string?>?
3+
Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.RowClass.set -> void

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@
6565

6666
private void RenderRow(RenderTreeBuilder __builder, int rowIndex, TGridItem item)
6767
{
68-
<tr @key="@(ItemKey(item))" aria-rowindex="@rowIndex">
68+
var rowClass = RowClass?.Invoke(item);
69+
<tr @key="@(ItemKey(item))" aria-rowindex="@rowIndex" class="@rowClass">
6970
@foreach (var col in _columns)
7071
{
7172
<td class="@ColumnClass(col)" @key="@col">@{ col.CellContent(__builder, item); }</td>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,11 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
104104
/// </summary>
105105
[Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
106106

107+
/// <summary>
108+
/// Optional. A callback to be invoked for each rendered row to specify a CSS class.
109+
/// </summary>
110+
[Parameter] public Func<TGridItem, string?>? RowClass { get; set; }
111+
107112
[Inject] private IServiceProvider Services { get; set; } = default!;
108113
[Inject] private IJSRuntime JS { get; set; } = default!;
109114

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,4 +121,31 @@ public void AdditionalAttributesApplied()
121121
Assert.Equal("somevalue", grid.GetDomAttribute("custom-attrib"));
122122
Assert.Contains("custom-class-attrib", grid.GetDomAttribute("class")?.Split(" "));
123123
}
124+
125+
[Fact]
126+
public void RowClassApplied()
127+
{
128+
var grid = app.FindElement(By.CssSelector("#grid > table"));
129+
var rows = grid.FindElements(By.CssSelector("tbody > tr"));
130+
131+
bool isJulieRowFound = false;
132+
foreach (var row in rows)
133+
{
134+
var firstName = row.FindElement(By.CssSelector("td:nth-child(2)")).Text;
135+
if (firstName == "Julie")
136+
{
137+
isJulieRowFound = true;
138+
Assert.Equal("highlight", row.GetDomAttribute("class"));
139+
}
140+
else
141+
{
142+
Assert.Null(row.GetDomAttribute("class"));
143+
}
144+
}
145+
146+
if (!isJulieRowFound)
147+
{
148+
Assert.Fail("No row found for Julie to highlight.");
149+
}
150+
}
124151
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<h3>Sample QuickGrid Component</h3>
44

55
<div id="grid">
6-
<QuickGrid Items="@FilteredPeople" Pagination="@pagination" custom-attrib="somevalue" class="custom-class-attrib">
6+
<QuickGrid Items="@FilteredPeople" Pagination="@pagination" RowClass="HighlightJulie" custom-attrib="somevalue" class="custom-class-attrib">
77
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
88
<PropertyColumn Property="@(p => p.firstName)" Sortable="true">
9-
<ColumnOptions>
10-
<div class="search-box">
11-
<input type="search" autofocus @bind="firstNameFilter" @bind:event="oninput" placeholder="First name..." />
12-
</div>
13-
</ColumnOptions>
14-
</PropertyColumn>
9+
<ColumnOptions>
10+
<div class="search-box">
11+
<input type="search" autofocus @bind="firstNameFilter" @bind:event="oninput" placeholder="First name..." />
12+
</div>
13+
</ColumnOptions>
14+
</PropertyColumn>
1515
<PropertyColumn Property="@(p => p.lastName)" Sortable="true" />
1616
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
1717
<PropertyColumn Title="Age in years" Property="@(p => ComputeAge(p.BirthDate))" Sortable="true"/>
@@ -27,6 +27,8 @@
2727
int ComputeAge(DateOnly birthDate)
2828
=> DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);
2929

30+
string HighlightJulie(Person person) => person.firstName == "Julie" ? "highlight" : null;
31+
3032
IQueryable<Person> FilteredPeople
3133
{
3234
get

0 commit comments

Comments
 (0)