We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change Grid Row Background Color Programmatically

After the Blazor Grid has loaded

How does one loop through rows and change the row background color based on a value in the row?

Using the following rules.

  • If the previous row value equals the current value, then change color white.
  • If the previous row value does not equal current value then change color gray
  • If the same use current color.

Pseudo Code

var oldRecord = string.Empty;
var myFlip = false;

for(int i = 0; i < DataGrid.Rows.Count - 1; i++)
if(oldRecord != DataGrid.Rows[i].Cells[1].Text)
oldRecord = DataGrid.Rows[i].Cells[1].Text;
myFlip = !myFlip;

for(int j = 0; j < DataGrid.Rows[i].Cells.Count - 1; j++)
DataGrid.Rows[i].Cells[j].Style.BackColor = myFlip ? "#ffffff" : "#c8eaea";

5 Replies 1 reply marked as answer

NP Naveen Palanivel Syncfusion Team February 17, 2023 03:47 AM UTC

Hi Dean,

Greetings from Syncfusion support.

You want to change the background color based on the value in the row. We have prepared a sample for you based on the rules described in the forum, and we will validate your query. To achieve your requirement, we can use the RowDataBound event. We have similar documentation in our UG documentation section. Please refer to the attached sample and UG documentation link for more information.

Link : https://blazor.syncfusion.com/documentation/datagrid/row

Please let us know if you have any concerns.


Naveen Palanivel

Attachment: BlazorApp1502_(2)_b4f37c2c.zip

DP Dean Parker February 17, 2023 05:05 PM UTC

Thanks for the sample grid and It looks good and should work for us.

Is the method RowBound called sequentially?  Meaning the first time it is called, we are on row 1 and the next time, we are on row 2 and so on?

PS Prathap Senthil Syncfusion Team February 20, 2023 11:56 AM UTC

Query:” Is the method RowBound called sequentially?”

Regarding your question, the RowDataBound event is raised for each row in the data grid and is called sequentially in the order of the rows in the data source. This event triggers every time a request is made to access row information, element, or data and before the row element is appended to the DataGrid element. Kindly refer to the UG documentation for your reference.



Marked as answer

DP Dean Parker April 18, 2023 03:08 PM UTC

I got this to work, thanks.

NP Naveen Palanivel Syncfusion Team April 21, 2023 02:11 AM UTC

Hi Dean,


We are glad to hear that your query has been resolved .

Please get back to us if you need further assistance.


Naveen Palanivel.

Live Chat Icon For mobile
Up arrow icon