DataGrid alternating row color

Is there a simple way to get alternating row colors?

The Radzen DataGrid has alternating row colors by default.

Not on any of the test pages I have created in either the RadZen app or using the Blazor component library!

Alternating colors are visible on our online demos. For example here:

Alternating rows are also visible in Radzen:

None of the examples you have listed show alternating row colors. Only modification based on row data. I am not interested in the data, merely the index of the row. So that I can backcolor the even number rows.

An example from excel using Conditional formatting and MOD


Is this achievable?

The DataGrid applies a CSS class on alternating rows by default which specifies a different background color. Both my screenshots show that even rows are white (#ffffff) and odd rows are light-blue (#f7f9fa)


The example I have linked shows how to customize the appearance of DataGrid rows via the RowRender and CellRender events. The implementation is here.

I have checked the computed background-color figures in devtools on the browser and the rows do alternate as you describe. The problem is that on my Windows 10 machine, the two colours #FFFFFF and #F7F9FA are indistinguishable.

If I override the ui-datatable-odd colour, it displays acceptably as below:

I need to be able to override the built in stylesheet.

Hi, Is there an answer for this? I'd like to be able to do this also. Thanks

Hi @Woody,

Check this and this replies.

Thanks, perhaps I'm misunderstanding as I'm new-ish to all this. I'd like to override this style when I create the RadzenGrid, Something like <RadzenGrid RowStyleOdd = "blah", RowStyleEven = "abc">

I can't seem to find the .ui style sheets for me to manually override before I build/deploy

Sorry ignore that. I can see I can override the row render. Thanks for your help

I found row render problematic.

I used the following override in site.css

.ui-datatable-odd > td {
background-color: rgba(244, 243, 170, 0.7);

1 Like

Updated 16 nov 2022

.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td {
background-color: #c80c0c4a


I had issue where the alternating color won't show up despite using the css code as mentioned above. Turned out the issue was due to having AllowAlternatingRows set to false (it's a Parameter inside <RadzenDataGrid>). After setting this to true and adding <style> below datagrid, everything works as expected (thanks to chaotzu post from Nov 22):

.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td {
background-color: lightcyan