How to Color Row in NG Grid?

[john1598360627]

I want to color specific records on the grid to give them a special indication. Well, in the grid's case that's the row.

I noticed the NG Grid has something called a 'rowStyleClassDataprovider'. So I thought I'd put a calculation in there to return a style class that is just the color red. And it didn't work.

Code: Select all


function calc_expired()
{
   
   var today = new Date()
   
   if( protocol_date_expiration < today ){
      return 'grid-protocol-expired'
   }
   else {
      return '';
   }
   
}


Code: Select all

.grid-protocol-expired{
   background-color: @status-error;
   
}


I even hard coded the coloring just to make sure it wasn't a problem with .less variables.

Is this not the way to color a specific row / record in the Grid? Is there another way to do so?

[mboegem]

Hi John,

this is the way to go.
The reason why it doesn't work has to be found in the inspector of the browser.
Have a look whether the grid-protocol-expired class isn't been overridden by a default class.

In that case, your calculation is correct, but you might find that you need to change the class and be more specific on the path.
This maybe something like this:

Code: Select all

.ag-theme-servoy .ag-cell.grid-protocol-expired {
background-color: @status-error;
}

But as I don't know the version that you're using, it might be a little different.