Skip to content

Commit 8bf73bb

Browse files
gvreddy04gvreddy04
authored
Grid row selection - highlight the row #769 (#782)
1 parent 034d255 commit 8bf73bb

10 files changed

+235
-5
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_22_Selection.razor ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_Selection.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_23_Multiple_Selection.razor ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_02_Multiple_Selection.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_24_Disable_Selection.razor ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_03_Disable_Selection.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_A_Change_Selected_Row_Background_Color.razor

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<Grid TItem="Employee1"
2+
Class="table table-hover table-bordered"
3+
Style="--bb-table-selected-row-color: #fff;--bb-table-selected-row-background-color: #4c0bce;--bb-table-selected-row-hover-color: #fff;--bb-table-selected-row-hover-background-color: #4c0bce;"
4+
DataProvider="EmployeesDataProvider"
5+
AllowFiltering="true"
6+
AllowSelection="true"
7+
SelectionMode="GridSelectionMode.Multiple"
8+
SelectedItemsChanged="OnSelectedItemsChanged"
9+
Responsive="true">
10+
11+
<GridColumns>
12+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
13+
@context.Id
14+
</GridColumn>
15+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
16+
@context.Name
17+
</GridColumn>
18+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
19+
@context.Designation
20+
</GridColumn>
21+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
22+
@context.DOJ
23+
</GridColumn>
24+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
25+
@context.IsActive
26+
</GridColumn>
27+
</GridColumns>
28+
29+
</Grid>
30+
31+
<div class="mt-3">
32+
Selected Items Count: @selectedEmployees.Count
33+
</div>
34+
35+
<div class="mt-2">
36+
Selected Employees:
37+
<ul>
38+
@foreach (var emp in selectedEmployees)
39+
{
40+
<li>@emp.Name</li>
41+
}
42+
</ul>
43+
</div>
44+
45+
@code {
46+
private IEnumerable<Employee1> employees = default!;
47+
48+
private HashSet<Employee1> selectedEmployees = new();
49+
50+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
51+
{
52+
Console.WriteLine("EmployeesDataProvider called...");
53+
54+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
55+
employees = GetEmployees(); // call a service or an API to pull the employees
56+
57+
return await Task.FromResult(request.ApplyTo(employees));
58+
}
59+
60+
private IEnumerable<Employee1> GetEmployees()
61+
{
62+
return new List<Employee1>
63+
{
64+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
65+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
66+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
67+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
68+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
69+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
70+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
71+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
72+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
73+
};
74+
}
75+
76+
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
77+
{
78+
selectedEmployees = employees is not null && employees.Any() ? employees : new();
79+
return Task.CompletedTask;
80+
}
81+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_B_Selected_Row_CSS_Variables.razor

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
--bb-table-selected-row-color: rgba(0, 0, 0, 0.0725);
2+
--bb-table-selected-row-background-color: rgba(0, 0, 0, 0.075);
3+
--bb-table-selected-row-hover-color: #000;
4+
--bb-table-selected-row-hover-background-color: rgba(0, 0, 0, 0.075);

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor

+11-3
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
Set <code>AllowSelection="true"</code> to enable the selection on the <code>Grid</code>.
1515
By default, <code>SelectionMode</code> is <b>Single</b>.
1616
</div>
17-
<Demo Type="typeof(Grid_Demo_22_Selection)" Tabs="true" />
17+
<Demo Type="typeof(Grid_Demo_01_Selection)" Tabs="true" />
1818

1919
<SectionHeading Size="HeadingSize.H2" Text="Multiple Selection" PageUrl="@pageUrl" HashTagName="multiple-selection" />
2020
<div class="mb-3">
2121
To select multiple rows, set <code>SelectionMode="GridSelectionMode.Multiple"</code>.
2222
</div>
23-
<Demo Type="typeof(Grid_Demo_23_Multiple_Selection)" Tabs="true" />
23+
<Demo Type="typeof(Grid_Demo_02_Multiple_Selection)" Tabs="true" />
2424
<Callout Color="CalloutColor.Danger" Heading="Note">
2525
<p>Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.</p>
2626
</Callout>
@@ -31,7 +31,15 @@
3131
For this, we have <code>DisableAllRowsSelection</code> and <code>DisableRowSelection</code> delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105.
3232
Also, disable check the row level checkbox if the employee Id is less than 105.
3333
</div>
34-
<Demo Type="typeof(Grid_Demo_24_Disable_Selection)" Tabs="true" />
34+
<Demo Type="typeof(Grid_Demo_03_Disable_Selection)" Tabs="true" />
35+
36+
<SectionHeading Size="HeadingSize.H2" Text="Change selected row background color" PageUrl="@pageUrl" HashTagName="change-selected-row-background-color" />
37+
<Demo Type="typeof(Grid_Demo_04_B_Selected_Row_CSS_Variables)" ShowCodeOnly="true" LanguageCode="LanguageCode.Css" />
38+
<div class="mb-3">
39+
These CSS variables are used to set the default colors and background color of a row when it's selected.
40+
You can override the <Badge>--bb-table-selected-row-color</Badge>, <Badge>--bb-table-selected-row-background-color</Badge>, <Badge>--bb-table-selected-row-hover-color</Badge>, and <Badge>--bb-table-selected-row-hover-background-color</Badge> variables in the application's specific CSS file to change the selected row's appearance. Please see the following example where the row text color is set to #fff (white) and the background color is set to #4c0bce (purple) when the row is selected.
41+
</div>
42+
<Demo Type="typeof(Grid_Demo_04_A_Change_Selected_Row_Background_Color)" Tabs="true" />
3543

3644
@code {
3745
private const string pageUrl = "/grid/selection";

‎BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{
66
<div class="bd-example-snippet bd-code-snippet">
77
<div class="d-flex align-items-center highlight-toolbar px-4 py-2 border">
8-
<small class="font-monospace text-body-secondary text-uppercase">razor</small>
8+
<small class="font-monospace text-body-secondary text-uppercase">@LanguageCode.ToLanguageCodeString()</small>
99
<div class="d-flex ms-auto">
1010
<Tooltip Title="@clipboardTooltipTitle" role="button" @onclick="CopyToClipboardAsync">
1111
<Icon Name="@clipboardTooltipIconName" Color="@clipboardTooltipIconColor" />
@@ -31,7 +31,7 @@ else if (!Tabs)
3131
<DynamicComponent Type="this.Type"/>
3232
</div>
3333
<div class="d-flex align-items-center highlight-toolbar px-4 py-2 border border-top-0">
34-
<small class="font-monospace text-body-secondary text-uppercase">razor</small>
34+
<small class="font-monospace text-body-secondary text-uppercase">@LanguageCode.ToLanguageCodeString()</small>
3535
<div class="d-flex ms-auto">
3636
<Tooltip Title="@clipboardTooltipTitle" role="button" @onclick="CopyToClipboardAsync">
3737
<Icon Name="@clipboardTooltipIconName" Color="@clipboardTooltipIconColor" />

‎BlazorBootstrap.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs

+20
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ public static class EnumExtensions
77
{
88
LanguageCode.AspNet => "language-aspnet",
99
LanguageCode.CSharp => "language-csharp",
10+
LanguageCode.Css => "language-css",
11+
LanguageCode.HTML => "language-html",
1012
LanguageCode.JavaScript => "language-js",
1113
LanguageCode.JSON => "language-json",
1214
LanguageCode.JSONP => "language-jsonp",
@@ -17,4 +19,22 @@ public static class EnumExtensions
1719
LanguageCode.YAML => "language-yaml",
1820
_ => null
1921
};
22+
23+
public static string? ToLanguageCodeString(this LanguageCode languageCode) =>
24+
languageCode switch
25+
{
26+
LanguageCode.AspNet => "ASP.NET",
27+
LanguageCode.CSharp => "C#",
28+
LanguageCode.Css => "CSS",
29+
LanguageCode.HTML => "HTML",
30+
LanguageCode.JavaScript => "JS",
31+
LanguageCode.JSON => "JSON",
32+
LanguageCode.JSONP => "JSONP",
33+
LanguageCode.Markdown => "Markdown",
34+
LanguageCode.PowerShell => "PowerShell",
35+
LanguageCode.Razor => "Razor",
36+
LanguageCode.Text => "Text",
37+
LanguageCode.YAML => "yaml",
38+
_ => null
39+
};
2040
}

‎blazorbootstrap/wwwroot/blazor.bootstrap.css

+15
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@
5050
/* table */
5151
--bb-table-sticky-background-color: #fff;
5252
--bb-table-freeze-column-background-color: #efefef;
53+
--bb-table-selected-row-color: #000;
54+
--bb-table-selected-row-hover-color: #000;
55+
--bb-table-selected-row-background-color: rgba(0,0,0,0.075);
56+
--bb-table-selected-row-hover-background-color: rgba(0,0,0,0.075);
5357
/* callout */
5458
--bb-callout-link: 10, 88, 202;
5559
--bb-callout-code-color: #ab296a;
@@ -137,6 +141,17 @@ table button.dropdown-toggle.bb-grid-filter::after {
137141
--bs-table-bg: inherit !important;
138142
}
139143

144+
.bb-table tr:has(input[type=checkbox]:checked) {
145+
color: var(--bb-table-selected-row-color);
146+
background-color: var(--bb-table-selected-row-background-color);
147+
}
148+
149+
.bb-table tr:has(input[type=checkbox]:checked):hover,
150+
.bb-table tr:has(input[type=checkbox]:checked):hover > * {
151+
color: var(--bb-table-selected-row-hover-color);
152+
background-color: var(--bb-table-selected-row-hover-background-color);
153+
}
154+
140155
.bb-table-sticky {
141156
border-collapse: collapse;
142157
border-spacing: 0;

‎docs/docs/05-components/grid.mdx

+102
Original file line numberDiff line numberDiff line change
@@ -2150,6 +2150,108 @@ Also, disable check the row level checkbox if the employee Id is less than 105.
21502150

21512151
[See demo here](https://demos.blazorbootstrap.com/grid/selection#disable-selection)
21522152

2153+
### Change selected row background color
2154+
2155+
```css
2156+
--bb-table-selected-row-color: rgba(0, 0, 0, 0.0725);
2157+
--bb-table-selected-row-background-color: rgba(0, 0, 0, 0.075);
2158+
--bb-table-selected-row-hover-color: #000;
2159+
--bb-table-selected-row-hover-background-color: rgba(0, 0, 0, 0.075);
2160+
```
2161+
2162+
These CSS variables are used to set the default colors and background color of a row when it's selected.
2163+
You can override the `--bb-table-selected-row-color`, `--bb-table-selected-row-background-color`, `--bb-table-selected-row-hover-color`, and `--bb-table-selected-row-hover-background-color` variables in the application's specific CSS file to change the selected row's appearance.
2164+
Please see the following example where the row text color is set to **#fff (white)** and the background color is set to **#4c0bce (purple)** when the row is selected.
2165+
2166+
<img src="https://i.imgur.com/64kqzO6.png" alt="Blazor Bootstrap: Grid Component - Change selected row background color" />
2167+
2168+
```cshtml {} showLineNumbers
2169+
<Grid TItem="Employee1"
2170+
Class="table table-hover table-bordered"
2171+
Style="--bb-table-selected-row-color: #fff;--bb-table-selected-row-background-color: #4c0bce;--bb-table-selected-row-hover-color: #fff;--bb-table-selected-row-hover-background-color: #4c0bce;"
2172+
DataProvider="EmployeesDataProvider"
2173+
AllowFiltering="true"
2174+
AllowSelection="true"
2175+
SelectionMode="GridSelectionMode.Multiple"
2176+
SelectedItemsChanged="OnSelectedItemsChanged"
2177+
Responsive="true">
2178+
2179+
<GridColumns>
2180+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
2181+
@context.Id
2182+
</GridColumn>
2183+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
2184+
@context.Name
2185+
</GridColumn>
2186+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
2187+
@context.Designation
2188+
</GridColumn>
2189+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
2190+
@context.DOJ
2191+
</GridColumn>
2192+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
2193+
@context.IsActive
2194+
</GridColumn>
2195+
</GridColumns>
2196+
2197+
</Grid>
2198+
2199+
<div class="mt-3">
2200+
Selected Items Count: @selectedEmployees.Count
2201+
</div>
2202+
2203+
<div class="mt-2">
2204+
Selected Employees:
2205+
<ul>
2206+
@foreach (var emp in selectedEmployees)
2207+
{
2208+
<li>@emp.Name</li>
2209+
}
2210+
</ul>
2211+
</div>
2212+
```
2213+
2214+
```cs {} showLineNumbers
2215+
@code {
2216+
private IEnumerable<Employee1> employees = default!;
2217+
2218+
private HashSet<Employee1> selectedEmployees = new();
2219+
2220+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
2221+
{
2222+
Console.WriteLine("EmployeesDataProvider called...");
2223+
2224+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
2225+
employees = GetEmployees(); // call a service or an API to pull the employees
2226+
2227+
return await Task.FromResult(request.ApplyTo(employees));
2228+
}
2229+
2230+
private IEnumerable<Employee1> GetEmployees()
2231+
{
2232+
return new List<Employee1>
2233+
{
2234+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
2235+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
2236+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
2237+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
2238+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
2239+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
2240+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
2241+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
2242+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
2243+
};
2244+
}
2245+
2246+
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
2247+
{
2248+
selectedEmployees = employees is not null && employees.Any() ? employees : new();
2249+
return Task.CompletedTask;
2250+
}
2251+
}
2252+
```
2253+
2254+
21532255
### Dynamic page size
21542256

21552257
<img src="https://user-images.githubusercontent.com/2337067/239613002-c7b4b6f6-be67-4f14-accc-b3dd390eb0f9.png" alt="Blazor Bootstrap: Grid Component - Dynamic page size" />

0 commit comments

Comments
 (0)