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

Radzen.Blazor Components
1

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.

        <RadzenDataGrid 
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
                AllowSorting="true" 
                Data="@CurrentWeekGames" 
                TItem="SpreadGamePickHelper" 
                ColumnWidth="200px"
                CellClick="@OnCellClick"
                CellRender="@OnCellRender">
            <Columns>
                <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;" />
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="SpreadGamePickHelper" Property="GameStartTime" Title="Game Time">
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
2
1 Like
3

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.

Thanks!

4

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.

5

@enchev

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.

6

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.

7

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;
}
8

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