javascript - Change color of certain row with the selection module -

when property has value, i'd color row. question has been asked before , has working solution here: how color row on specific value in angular-ui-grid?

i'm setting front color (with color: #ff0000), not background color.

this works fine until add selection module. module, have checkbox @ beginning of row. when check this, background color of row changes (not front color!). add class, declared in grid's css:

.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {   background-color: #c9dde1; } 

when checkbox checked, class added element.

the code have similar code in linked answer:

rowtemplate: '<div ng-class="{\'targetrow\': row.entity.target }"><div ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.uid" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isrowheader }" ui-grid-cell></div></div>',  .targetrow {     color: #ff0000; } 

after adding this, background color doesn't change anymore when row selected. in debugging tools of chrome, can see class still being correctly added , there no other differences, still color somehow overriding background-color

why happen , how can fix this?

here's plunker: http://plnkr.co/edit/u1rmt48ksjk5gvh0fv43?p=preview

remove rowtemplate see difference.

the problem template think after i've updated row template to

var rowtpl = '<div ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.coldef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isrowheader, \'green\':true, \'blue\':row.entity.count==1 }" ui-grid-cell></div>'; 

the grid started work

http://plnkr.co/edit/4xvh31i48y5ikzbafeve?p=preview