0

When a property has a certain value, I'd like to color that row. This question has been asked before and has a working solution here: How to color row on specific value in angular-ui-grid?

I'm setting the front color (with color: #FF0000), not the background color.

This works fine until you add the selection module. With this module, you have an extra checkbox at the beginning of this row. When you check this, the background color of the row changes (not the front color!). All this does it add an extra class, which is declared in the grid's css:

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

When the checkbox is checked, this class is added to the element.

The code I have is similar to the code in the linked answer:

rowTemplate: '<div ng-class="{\'targetRow\': row.entity.target }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by 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, the background color doesn't change anymore when a row is selected. In debugging tools of Chrome, I can see the class is still being correctly added and there are no other differences, still color is somehow overriding background-color

Why does this happen and how can I fix this?

Here's a Plunker: http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview

Remove the rowTemplate to see the difference.

Community
  • 1
  • 1
Bv202
  • 3,924
  • 13
  • 46
  • 80

1 Answers1

2

the problem is with template I think after I've updated row template to

var rowtpl = '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by 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 to work

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

maurycy
  • 8,455
  • 1
  • 27
  • 44
  • Thanks, that's exactly what I want! Could you explain why it didn't work the way I've tried it? – Bv202 Jun 25 '15 at 09:41
  • I'm debugging it deeper to give you that answer ;) – maurycy Jun 25 '15 at 09:42
  • It appears that the `root` element for row has to be the `ui-grid-cell`, you can have more complicated structure inside but cell has to be on top – maurycy Jun 25 '15 at 09:52