CODEWITHSUNDEEP
angularjsng-grid
user3799365
user3799365

Reputation: 1087

Color coding ng-grid cells based on numeric cell values

I have a special condition whereby the values inside a cell can be 1,2,0 or -N. Depending on these values the background color on the ng-grid cell should change. I have made an attempt to do this on the plunker

http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

But I GREEN both times even when the value is 1 or 2. I can see that most probably my syntax is not correct, although CHROME didn't complain. Here is a snippet of my cell

$scope.gridHours = { 
                    data : 'hours',
                    columnDefs  : [ 
                                    {field : 'caseId', displayName : 'Case ID'},
                                    {field : 'EHStatus.TOPPER.code', displayName : 'TOPPER Status Code',cellTemplate: '<div class="ngCellText" ng-class="{\'green\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'1\' ,\'red\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'2\'}" >{{ row.getProperty(col.field) }}</div>'},
                                    {field : 'EHStatus.SFT.code', displayName : 'SFT Status Code'},
                                    {field : 'EHStatus.SPD.code', displayName : 'SPD Status Code'},
                                    {field : 'EHStatus.RSC.code', displayName : 'RSC Status Code'}
                                ],
                    enableColumnResize : true
                    };

Upvotes: 0

Views: 1105

Answers (1)

kman
kman

Reputation: 330

Your styling for red class is wrong. Change the background color to red for red. :)

.green {
  background-color: green;
  color: white;
}

.red {
  background-color: red;
  color: white;
}

Just a tip too, I do not know if you are using it, but check out the styling of the element using chrome's built in inspector. I saw your conditionals were correct, so next step was to just check your css declarations.

Upvotes: 1

Related Questions