In my Blazor Server Application, I am trying to change the background color of the datagrid row based on a condition as follows;
void RowRender(RowRenderEventArgs<Order> args)
{
if(args.Data.Status == "Completed")
args.Attributes.Add("style", "background-color: var(--rz-success-light)");
}
But it changed the color if I click on the row. How can I make it work without selecting a row?
<RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="7" AllowSorting="true" RowClick="RowClick" ExpandMode="DataGridExpandMode.Single"
Data="@_orders" TItem="Order" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" @bind-Value="@SelectedOrders"
ShowExpandColumn="false" ShowPagingSummary="true" AllowColumnResize="true" RowRender="@RowRender">
...
<Columns>
<RadzenDataGridColumn TItem="Order" Property="Id" Title="Order ID" Width="120px"/>
<RadzenDataGridColumn TItem="Order" Property="Customer.Name" Title="Customer" Width="200px">
<EditTemplate Context="order">
<RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
Data=@_customers Count="5" TextProperty="Name" ValueProperty="Id"
Class="w-100" @bind-Value="order.CustomerId"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="OrderDateTime" Title="Order Date" Width="200px">
<Template Context="order">
@($"{order.OrderDateTime:dd/MM/yyyy}")
</Template>
<EditTemplate Context="order">
<RadzenDatePicker @bind-Value="order.OrderDateTime" DateFormat="dd/MM/yyyy HH:mm" Class="w-100"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="Status" Title="Status" Width="100px">
...
This works for me.
void CellRender(DataGridCellRenderEventArgs<ReportViewModel> args)
{
args.Attributes.Add("style", $"background-color: {(args.Data.TotalSellPrice <= args.Data.TotalUnitCost ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
}
Use the template property to evaluate the object property value:
<RadzenDataGrid Data="@_orders" TItem="Order" RowUpdate="@OnUpdateRow" ...>
<Columns>
<RadzenDataGridColumn Width="50px" TItem="Order">
<Template Context="o">
@if (order.Data.Status=="Completed")
{
<RadzenButton Disabled ButtonStyle="ButtonStyle.Success" Icon="done" />
} else
{
<RadzenButton ButtonStyle="ButtonStyle.Danger" />
}
</Template>
</RadzenDataGridColumn>