RadzenDataGrid - How to color entire row based on row values?

Radzen.Blazor Components
1

Hi,

I am using RadzenDataGrid, I wonder if I can change the background color of a row based on some values inside of this row?

Thank you.

2

Hi @Robot,

You can check this demo: Blazor DataGrid conditional template

1 Like
3

thank you @korchev for your support.

4

Hi @korchev,

I have 20 columns in my data grid. Is there an easy way to change the background color of the entire row rather that adding a template for each of the 20 columns in a row?

Thank you.

5

Blazor DataGrid conditional template

This demo use either Template or RowRender or CellRender or HeaderFooterCellRender to customize the grid.

In ur case u should use RowRender and work with css if u dont wanna use the Template

6

RowRender will not work as it allows setting the row attributes only. And the background is set at cell attribute level. Using CellRender should work though as it also provides the DataItem in the event args and also allows to specify cell attributes.

7

I am using CellRender as follows. This works fine after the page loads but I also want to change the background color after the row update.

How can I do it after SaveRowDetail?

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

async Task EditRow(ReportViewModel? reportViewModel)
{
    await _grid.EditRow(reportViewModel);
}

async Task SaveRowDetail(ReportViewModel reportViewModel)
{
   
    if (reportViewModel != null)
    {
        orderDetail.Id = reportViewModel.OrderDetailId;
        orderDetail.Quantity = reportViewModel.Quantity;
        orderDetail.CostRatio = reportViewModel.CostRatio;
        orderDetail.Description = reportViewModel.Description;
        orderDetail.ProductCode = reportViewModel.ProductCode;
        orderDetail.ProductName = reportViewModel.ProductName;
        orderDetail.BuyUnitPrice = reportViewModel.BuyUnitPrice;
        orderDetail.ShippingNumber = reportViewModel.ShippingNumber;
        orderDetail.ShippingWeek = reportViewModel.ShippingWeek;
        orderDetail.Status = reportViewModel.OrderDetailStatus;
        orderDetail.TotalBuyPrice = reportViewModel.TotalBuyPrice;
        orderDetail.TotalSellPrice = reportViewModel.TotalSellPrice;
        orderDetail.SellUnitPrice = reportViewModel.SellUnitPrice;
        orderDetail.UnitCost = reportViewModel.UnitCost;
        orderDetail.TrackingNumber = reportViewModel.TrackingNumber;
        orderDetail.TotalUnitCost = reportViewModel.TotalUnitCost;
        orderDetail.Currency = reportViewModel.Currency;
        orderDetail.OrderId = reportViewModel.OrderId;
        orderDetail.VendorId = reportViewModel.VendorId;
        orderDetail.Warehouse = reportViewModel.Warehouse;
        orderDetail.PaymentStatus = reportViewModel.PaymentStatus;
        orderDetail.CustomerOrderNumber = reportViewModel.CustomerOrderNumber;
        orderDetail.CustomerStockCode = reportViewModel.CustomerStockCode;
        orderDetail.PoNotes = reportViewModel.PoNotes;

        if (user.IsInRole("Administrators"))
        {
            if (reportViewModel.OrderDetailStatus == "Completed")
            {
                orderDetail.CompletionDateTime = reportViewModel.CompletionDateTime;
                // reportViewModel.CompletionDateTime = DateTime.Now.Date;
                reportViewModel.Status = "Completed";
            }
            else
            {
                orderDetail.CompletionDateTime = null;
                reportViewModel.CompletionDateTime = null;
                reportViewModel.Status = "Continues";
            }
        }
       
    }
    
    
    await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
    await _grid.UpdateRow(reportViewModel);
    _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);
    await _grid.Reload();
   
}
8

Yeah ur are right but u can make it work by using class if the developer have familiarity with css

<style>
  .bgyellow td {
      background-color: yellow !important;
  }
</style>

void RowRender(RowRenderEventArgs<OrderDetail> args)
{
    args.Attributes.Add("class", "bgyellow");
}

Maybe can be helpful for someone.

1 Like
9

The CellRender event should happen every time the Reload() method of the parent RadzenDataGrid is called.

10

You are right @korchev, CellRender event is triggering after Reload().

But there is something wrong with this code. It does not make the background color red even if the condition is right after SaveRowDetail.

Any ideas why is not working?

void CellRender(DataGridCellRenderEventArgs<ReportViewModel> args)
{
    Console.WriteLine($"{args.Data.OrderId} ---- {args.Data.OrderDetailId} ---- {args.Data.TotalSellPrice} ---- {args.Data.TotalUnitCost}");

    args.Attributes.Add("style", $"background-color: {(args.Data.TotalSellPrice <= args.Data.TotalUnitCost ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
}
11

No ideas why it is not working as I don't have the full context and don't know what you consider working and what not.

You can do the following to find out though:

  1. Debug your code and see if it behaves as you expect it to.
  2. Check with your browser's developer tools what the final style attribute value is.
12

  1. Code behaves as I expected, after ReLoad() the CellRender is called.

  2. The final style is red (--rz-secondary), did not changed to --rz-base-background-color