Datagrid change row Color based on value in row


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 ?


Yes, you can do that:

Page Load execute action:

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


.class1 td {
  background-color: red;

.class2 td {
  background-color: blue;

OK, this works... thank you


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


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 so we can troubleshoot.

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?

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!