I would like to use the datagrid with multiselect with conditional formatting but it is not working as I expect. Currently, the conditional formatting only shows up on hover and when it shows it doesn't seem to be the actual color but some sort of blended color. I would like the conditional formatting to show when the grid is displayed and not only on hover.
I'm wondering if I'm not linking the css in the right way. I don't know if I should link to standard.css or standard-base.css. This older post shows link to both standard.css and standard-base.css but you're getting starting documentation it links to the base css only.
Here are the files that show the behavior I'm describing with conditional formatting showing on hover only:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>RadzenBlazorPOC</title>
<base href="/" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard.css">
<link href="css/app.css" rel="stylesheet" />
<link href="RadzenBlazorPOC.Client.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>
DataGridMulitpleSelection.razor
@page "/datagrid-multiple-selection"
@using Radzen
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H1" Class="my-4">
DataGrid <strong>Multiple Selection</strong>
</RadzenText>
<RadzenCard Class="m-4" style="display: flex; align-items: center; gap: 0.5rem">
<RadzenCheckBox @bind-Value=@allowRowSelectOnRowClick Name="CheckBox1" />
<RadzenLabel Text="Allow row select on row click" Component="CheckBox1" />
</RadzenCard>
<RadzenDataGrid @ref="grid" AllowRowSelectOnRowClick="@allowRowSelectOnRowClick" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="4"
AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="200px"
SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedEmployees Class="m-4" RowRender="@RowRender">
<Columns>
<RadzenDataGridColumn TItem="Employee" Width="60px" Sortable="false" Filterable="false">
<HeaderTemplate>
<RadzenCheckBox TriState="false" TValue="bool" Value="@(employees.Any(i => selectedEmployees != null && selectedEmployees.Contains(i)))"
Change="@(args => selectedEmployees = args ? employees.ToList() : null)" />
</HeaderTemplate>
<Template Context="data">
<RadzenCheckBox TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))"
TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Employee" Sortable="false" Filterable="false">
<Template Context="data">
<RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px;" />
@data.FirstName @data.LastName
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
<RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
<RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
<RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
<RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
</Columns>
</RadzenDataGrid>
@code {
bool allowRowSelectOnRowClick = true;
IEnumerable<Employee> employees;
IList<Employee> selectedEmployees;
RadzenDataGrid<Employee> grid;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
employees = new Employee[] {
new Employee() {
EmployeeID = 1,
ReportsTo = 2,
LastName = "Davolio",
FirstName = "Nancy",
Title = "Sales Representative",
TitleOfCourtesy = "Ms.",
BirthDate = DateTime.Parse("1968-12-08"),
HireDate = DateTime.Parse("2012-05-01"),
Address = "507 - 20th Ave. E.\nApt. 2A",
City = "Seattle",
Region = "WA",
PostalCode = "98122",
Country = "USA",
HomePhone = "(206) 555-9857",
Extension = "5467",
Photo = "",
Notes = "Education includes a BA in psychology from Colorado State University in 1970. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International.",
PhotoPath = ""
},
new Employee() {
EmployeeID = 2,
ReportsTo = null,
LastName = "Fuller",
FirstName = "Andrew",
Title = "Vice President, Sales",
TitleOfCourtesy = "Dr.",
BirthDate = DateTime.Parse("1972-02-19"),
HireDate = DateTime.Parse("2012-08-14"),
Address = "908 W. Capital Way",
City = "Tacoma",
Region = "WA",
PostalCode = "98401",
Country = "USA",
HomePhone = "(206) 555-9482",
Extension = "3457",
Photo = "",
Notes = "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.",
PhotoPath = ""
},
new Employee() {
EmployeeID = 3,
ReportsTo = 2,
LastName = "Leverling",
FirstName = "Janet",
Title = "Sales Representative",
TitleOfCourtesy = "Ms.",
BirthDate = DateTime.Parse("1983-08-30"),
HireDate = DateTime.Parse("2012-04-01"),
Address = "722 Moss Bay Blvd.",
City = "Kirkland",
Region = "WA",
PostalCode = "98033",
Country = "USA",
HomePhone = "(206) 555-3412",
Extension = "3355",
Photo = "",
Notes = "Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.",
PhotoPath = ""
}
};
}
void RowRender(RowRenderEventArgs<Employee> args)
{
args.Attributes.Add("style", $"background-color: {(args.Data.EmployeeID == 1 ? "yellow" : "white")};");
}
public class Employee
{
public string LastName
{
get;
set;
}
public string FirstName
{
get;
set;
}
public string Title
{
get;
set;
}
public string TitleOfCourtesy
{
get;
set;
}
public DateTime? BirthDate
{
get;
set;
}
public DateTime? HireDate
{
get;
set;
}
public string Address
{
get;
set;
}
public string City
{
get;
set;
}
public string Region
{
get;
set;
}
public string PostalCode
{
get;
set;
}
public string Country
{
get;
set;
}
public string HomePhone
{
get;
set;
}
public string Extension
{
get;
set;
}
public string Photo
{
get;
set;
}
public string Notes
{
get;
set;
}
public string PhotoPath
{
get;
set;
}
public int? ReportsTo
{
get;
set;
}
public int EmployeeID
{
get;
set;
}
}
}