Is there a way to change the color of a row when a specific property has a certain value? I found a solution for this issue on Stack Overflow, which can be viewed here: How to color row on specific value in angular-ui-grid?
Instead of changing the background color, I need to modify the text color (using color: #FF0000).
The solution works perfectly until the selection module is added. Once the checkbox is checked, the background color changes but not the front color of the text. This happens because an extra class is applied, which is defined 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 selected, this particular class is assigned to the element.
The code structure resembles the one provided 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;
}
However, after implementing this code, the background color no longer changes when a row is selected. Despite verifying through Chrome's debugging tools that the class is correctly applied and finding no other discrepancies, it seems like the color property overrides the background-color.
What could be causing this behavior and how can it be resolved?
Access the Plunker link below for further reference: http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview
To observe the changes, simply remove the rowTemplate.