blazor-server-sideradzen

Datagrid - how to change background color of a row based on a condiiton


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)")};");
    }

Solution

  • 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>