Change Grid Row Background Color Programmatically

[Dean Parker]

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

[Naveen Palanivel]

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.

Regards,

Naveen Palanivel

Attachment: BlazorApp1502_(2)_b4f37c2c.zip

[Dean Parker]

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?

[Prathap Senthil]

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.

Reference:
https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound

https://blazor.syncfusion.com/documentation/datagrid/row#row-customization

[Dean Parker]

I got this to work, thanks.

[Naveen Palanivel]

Hi Dean,

Welcome

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

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.