Cell class change is postponed till next edit or scroll

Question

I'm trying to mark edited in UI Grid cell by blue color. For this purpose in afterCellEdit event I make some changes in the row entity. cellClass function checks for these marks and returns corresponding class name. Call to $scope.$apply (specified in documentation) is also used.

Following example is simplified as there is no check, what column has been edited. In the real app I have more complicated code to mark specific cell. But this example is enough to show the problem:

1. Select cell in Company column (but not in the last row).
2. Change the value there.
3. Press Enter.
   Tha value changes, Edited column changes to true, selection moves to the next row, but the text in edited cell is still black.
4. Press Enter again.
   Text in edited on step 2 cell becomes blue.

How can I force color change on step 3 instead of 4?

http://plnkr.co/edit/SEEf4DPhA3CB1mx7R4I8?p=preview

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    enableCellEditOnFocus: true,
    
    columnDefs: [{
      field: 'edited',
      enableCellEdit: false
    },{
      field: 'company',
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
        return row.entity.edited ? 'blue' : '';
      }
    }],
    
    onRegisterApi: function (gridApi) {
      gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        if (newValue !== oldValue) {
          rowEntity.edited = true;
          $scope.$apply();
        }
      });
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

.grid {
  width: 500px;
  height: 200px;
}

.blue {
  color: blue;
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">

<div ng-app="app" ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit ui-grid-cellNav class="grid"></div>

PS: Same question in Russian.

Answer 1

You can use notifyDataChange to let uigrid know the value has changed.

juste inject uiGridConstants in your controller and replace $scope.apply() by gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

    app.controller('MainCtrl', ['$scope', '$http','uiGridConstants', function ($scope, $http,uiGridConstants) {
    $scope.gridOptions = {
    enableCellEditOnFocus: true,

    columnDefs: [{
      field: 'edited',
      enableCellEdit: false
    },{
      field: 'company',
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
        return row.entity.edited ? 'blue' : '';
      }
    }],

    onRegisterApi: function (gridApi) {
      gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        if (newValue !== oldValue) {
          rowEntity.edited = true;
          gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
        }
      });
    }
};

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

A working plunker : http://plnkr.co/edit/GrseKTm6EF2CdWiNhXM7?p=preview