Datagrid change row Color based on value in row

#1

Hello,

how could I change the background or fontcolor color of a row based on a value in that row?

I have tried this


and this works ok for coloring a cell... but would it be possible to color a row ?

0 Likes

#2

Hi,

Yes, you can do that:

Page Load execute action:

this.grid0.dataTable.rowStyleClass = (data, index) => {
   return data.Id >= 3 ? 'class1' : 'class2';
}

styles.css

.class1 td {
  background-color: red;
}


.class2 td {
  background-color: blue;
}

0 Likes

#3

OK, this works... thank you

0 Likes

#4

Hello.

I'm trying to colour with red the entire line if qtt < qtt_necessaria_encomenda.
After I load the grid I run this code and nothing happens.

this.grid_componentes.dataTable.rowStyleClass = (data, index) => {
   return data.qtt > data.qtt_necessaria_encomenda ? 'class1' : 'class2';
}

I added the classes on the css file. What can be wrong here?

Thanks in advance

image

0 Likes

#5

Do you see a JavaScript error in your browser development console?

If you have a Radzen Professional subscription you can send us the application to info@radzen.com so we can troubleshoot.

0 Likes

#6

Hello. there is no javascript error on the console.

Is colouting now but only when the value is red... is not coloring the rows with green.

What can be wrong?

0 Likes