Angular UI Grid: Conditional Row Format Not Overriding Default Alternating Colours

Question

For my UI-Grid I've created conditional formatting with the following row template in the $scope.gridOptions object:

rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
    '\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
    '\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
    '<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 }" ui-grid-cell></div></div>'

The classes look like this:

.ui-grid-row .recruiter-row-active {
  background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
  background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
  background-color: #70cc79 !important;
}

The class for the html row in question is "ui-grid-row" and "ng-scope" and the parent element has class "ui-grid-canvas"

I was able to get my conditional formatting to work when I also implemented a

.ui-grid-row .ui-grid-cell {
  background-color: inherit !important;
}

However I don't want to affect the other grids in my web app.

How would I get my conditional row formatting to override the default?

Answer 1

You can use scss and wrap your grid with a:

<div view="my-colors">
    <!-- your grid element goes here -->
</div>

in the scss file, wrap the styling you want to affect only that view with:

[view="my-colors"] {
    .ui-grid-row .ui-grid-cell {
      background-color: inherit !important;
    }
}