How to change background color of a Radzen Data Grid row after updating

Question

I am trying to change the background color of a row on a Radzen Data Grid component after updating the row. The code I am currently using isn't working. Here is how I am trying to change the background color:

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

The CellRender event is triggered after await _grid.Reload();, but it does not make the background color red even if the condition is true. I checked with my browser's developer tools and the final style is red (--rz-secondary), did not change to --rz-base-background-color. Here is how I updated the row:

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.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();
   
}

If I navigate to another page and come back to this page again, the row I updated background color is changed to red!

Answer 1

Hi,@Cenk,

The CellRender event is triggered after await _grid.Reload();, but it does not make the background color red even if the condition is true If I navigate to another page and come back to this page again, the row I updated background color is changed to red! It indicates updating grid doesn't work for you ,but rerendering the whole page would work,so a workaround for you: call await InvokeAsync(StateHasChanged); to update the whole page

If you still have problems with this issue,show us a minimal example that could reproduce so that we could know where you got wrong and explain the reason to you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. Best regards, Ruikai Feng

Answer 2

Use the

RowRender

Event for Color change of the rows or the

OnLoadData

Event

RowRender="OnRowRender"

from the RadzenDataGrid and than the Event:

 void OnRowRender(RowRenderEventArgs<MyData> args)
    {
        // To work on this the Datagrid has to set AllowAlternatingRows = false
        if (args.Data.MyItem == true)
        {
            args.Attributes.Add("style", $"background-color: var(--rz-danger-lighter);");
        }
    }