Angular UI-Grid conditional coloring selection

Question

I want to apply conditional coloring based on data in my grid. Im using the cellClass function in columnDefs for this. My problem is that these classes are not updated on selection change, and i'm not able to define colors for rows that are selected and also have a conditional coloring. So for ex some rows are colored red based on data, and when they get selected, their color should be darker red to show the selection and the condition as well.

Is there any way to achieve this?

This is what im attempting to do, but obviously it wont work as this function is not called on selection change:

    vm.getCellHighlight = function(grid, row, col, rowRenderIndex, colRenderIndex) {
        var rowStatus = row.entity.isChild ? grid.parentRow.entity.transactionItemStatus : row.entity.transactionItemStatus;
        var rowSelected = row.isSelected ? 'Selected' : '';
        var rowType = '';
        if (rowStatus == ticketStateStorno){
            rowType = 'Storno';
        }
        if (rowStatus == ticketStateUsed){
            rowType = 'Used';
        }
        return (rowRenderIndex % 2)? 'searchSalesGridHighlight' + rowType + 'Dark' + rowSelected : 'searchSalesGridHighlight' + rowType + 'Light' + rowSelected;
    };

Answer 1

I believe this might be close to what you want, bitwise.

JavaScript/AngularJS Controller:

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  var colorRowTemplate =
    //same as normal template, but extra ng-class for old people:  'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected)
    "<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected), 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    rowTemplate: colorRowTemplate,
    showGridFooter: true
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

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