How to have a custom css class for a particular row in RadzenDataGrid

I have the following grid. I want a particular row to be greyed out if DateTime.Now is after the GameStartTime value shown in one of the columns. I don't see a good way to set a custom class based on a variable value.

                <RadzenDataGridColumn TItem="SpreadGamePickHelper" Property="AwayTeam" Title="Away" />
                <RadzenDataGridColumn TItem="SpreadGamePickHelper" Property="HomeTeam" Title="Home" />
                <RadzenDataGridColumn TItem="SpreadGamePickHelper" Property="IsKeyPick" Title="Key Pick">
                    <Template Context="data">
                        <RadzenCheckBox @bind-Value=@data.IsKeyPick TValue="bool" />
                        <RadzenLabel Text="Key Pick" Style="margin-left: 8px; vertical-align: middle;" />
                <RadzenDataGridColumn TItem="SpreadGamePickHelper" Property="GameStartTime" Title="Game Time">
1 Like

Hi @enchev

Some properties like "color" or "background-color" cannot be changed using RowRender. If I try to change them there is no impact on the html element. Other properties like font-weight or font-family worked well. Before the 4.x.x update this worked fine.


Hey @gsivit94,

This thread is about how to assign custom CSS class not inline styles. Inline styles for rows might not be visible since our themes are styling row cells.


Before 4.x.x update I was able to assign custom CSS classes to grid rows (using RowRender event) which modifies properties like "background-color" or "color" and it worked well, but nowadays it's not working.

You can still assign custom CSS classes however without knowing how they look we cannot help much. Check our forum FAQ to know how to improve your question.

It will probably work if you target the .rz-cell-data class with your custom classes (background-color should still work in most themes applied at row level).

.my-custom-row .rz-cell-data {
   color: red !important;

Or you can use the --rz-grid-cell-color css variable:

.my-custom-row {
    --rz-grid-cell-color: red;

For anybody finding this in the future:

It appears that the RowRender does not work with background color. Targeting .rz-cell-data did not produce the desired results, as it only applied the background color to the text and not the whole cell.

However I was able to achieve the desired result by using CellRender instead and passing it RowRenderer Event args like this

        void CellRender(RowRenderEventArgs<model> args)
            if (args.Data.Status == 1)
                args.Attributes.Add("class", "custom-class-1");
            if (args.Data.Status == 2)
                args.Attributes.Add("class", "custom-class-2");
            if (args.Data.Status == 3)
                args.Attributes.Add("class", "custom-class-3");

    .custom-class-1 {
        background-color: orange !important;

    .custom-class-2 {
        background-color: lightpink !important;

    .custom-class-3 {
        background-color: lightblue !important;