How to achieve dynamic css class in ui-grid that reflects page content changes?

Question

My goal is to achieve a dynamic CSS class in ui-grid cells with simplest example being to color gender column or display an icon based on cell's value. The CSS classes would be updated according to current data on the page so if eg. a button is clicked that updates the data bound to the grid the classes would be recalculated.

There is plenty of examples from authors and contributors on dynamic CSS classes eg. http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed however they only describe a way to conditonally apply a class during page load and what I need is a way to get the behaviour that would reapply the rules on page contents changes as described above the way basic angular ng-class works.

In ui-grid you can use cell templates or cell class mechanisms in column definition but neither seems to work here:

 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (grid.getCellValue(row ,col).toLowerCase() === 'male') {
      return 'blue';
    }
  }

cellTemplate: 
    '<div ng-class="{ blue: \'{{COL_FIELD.sex}}\' == \'male\', 
    green: \'{{COL_FIELD.sex}}\' == \'female\'}">
    {{ COL_FIELD.first }} {{ COL_FIELD.last }}</div>' 

I created a plunkr with a full example of this problem: https://plnkr.co/edit/rob144gVQo6uy1AVuJlS

I also tried calling various refresh methods on grid object and angular's $scope.apply but to no effect.

Answer 1

The proper way is to use grid.appScope object in the cell template by attaching a function to it:

cellTemplate: '<div ng-class="{ \'my-css-class\': grid.appScope.rowFormatter(row) }"> ... '

where rowFormatter should be a binary function that has to be attached to scope in the controller:

$scope.rowFormatter = function(row) {
    return row.entity.gender === 'male';
};

This is actually there hidden in documentation examples:
http://ui-grid.info/docs/#/tutorial/317_custom_templates