Grid Background Color

Question

1. How do I set the background color of the rows in the grid?

2. I used the following style to change alternate row color:

.e-grid .e-altrow {

background-color: aliceblue;

}

This changes the row color for every other row. But how do I change the color of the other rows?

Regards,

Amjad.

Vignesh Natarajan · Accepted Answer

Hi Amjad,

Thanks for contacting Syncfusion support.

Query: “This changes the row color for every other row. But how do I change the color of the other rows?”

We have achieved your requirement by applying the below style to other rows using the specific class name. Refer the below code example.

<style>

/*to style the alternate rows*/

.e-grid .e-row.e-altrow {

background-color: aliceblue;

}

/*to style the remaining rows*/

.e-grid .e-row {

background-color: antiquewhite;

}

</style>

Refer our UG documentatoin for your reference

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/

Note: If you want to change the background color of row based on the record value, we suggest you to achieve this requirement by adding a specific class name to that row using RowDataBound event of the Grid.

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Amjad Khan · Answer

Thank you so much.I also tried this and this works as well:tr:nth-child(even) {        background-color: #cdd8fd;}tr:nth-child(odd) {        background-color: #bdc1ff;}

Vignesh Natarajan · Answer

Hi Amjad,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan