How to Color Row in NG Grid?

Find out how to get things done with Servoy. Post how YOU get things done with Servoy

How to Color Row in NG Grid?

Postby john1598360627 » Sat Aug 26, 2023 5:05 am

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?
john1598360627
 
Posts: 187
Joined: Tue Aug 25, 2020 3:03 pm

Re: How to Color Row in NG Grid?

Postby mboegem » Sat Aug 26, 2023 8:27 am

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.
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1800
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam


Return to How To

Who is online

Users browsing this forum: No registered users and 1 guest