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

You can dynamically cellCss without using cellTemplate.

You first have to register your gridApi somewhere in Code

$scope.gridOptions.onRegisterApi = function ( gridApi ) { 
  $scope.gridApi = gridApi;
}

then, where ever the data is changing add a data change notification call

$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );

this will basically tell ui-grid that data is changed and re-calculate the CSS value. see here