Datagrid change row Color based on value in row

Radzen Studio Angular
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 ?

2

Hi,

Yes, you can do that:

Page Load execute action:

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

image
image.png1920×1080 137 KB

styles.css

.class1 td {
  background-color: red;
}


.class2 td {
  background-color: blue;
}

image
image.png1920×1080 109 KB

image
image.png1920×1080 110 KB

3

OK, this works... thank you

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

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.

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?

7

I made the mistake of putting the css classes in the component style and it doesn't work.
But putting the classes in the project's style.css file it had worked!