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: https://blazor.radzen.com/datagrid-conditional-template
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
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
}
2 Likes
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):
<style>
.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td {
background-color: lightcyan
}
</style>