detect cell edit in angular ui-grid

I updated the default row template to look like below

rowTemplate: '<div ng-class="{\'row-changed\':row.entity.State==\'changed\'}" ng-click="grid.appScope.fnOne(row)" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>',

And then in onRegisterApi

onRegisterApi: function( gridApi ) {
            $scope.gridApi = gridApi;
            $scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
                if(newValue != oldValue)
                    rowEntity.State = "changed";
            })
        }

The row will now get the class "row-changed" if the entity has the State "changed".

You might want to add some extra checks if the cell gets changed back to its original value, but that's another issue.

You can use the beginCellEdit event:

gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef) { ... });

Are you interested in the cell being edited or the bound data?

I added a deep watch to the bound dataSource which will fire when any item in array changes.

unbindWatch = $scope.$watch("array", function (newValue, oldValue) {
    if (newValue != oldValue) {
        vm.isDirty = true;
     }
 }, true);

$watch returns a method to unbind the watch, stop looking for changes. So just execute the returned method to end the watch.

For 'ngGridEventEndCellEdit' specific event, I think it is deprecated. Try this instead

$scope.$on('uiGridEventEndCellEdit', function(data) {

https://github.com/angular-ui/ui-grid/wiki/Grid-Events

Other option is:

You can use the row template which adds a css class for coloring the row. And then add this class when cell is edited.

function rowTemplate() {
        return '<div ng-class="{\'ui-grid-row-bg-red\':row.entity.IsEdited}" >' +
                  '<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>';
    }

and define css class as:

  .gridStyle .ui-grid-row-bg-red .ui-grid-cell {
       background-color: #872f2f;
       color: #fff;
  }

And to detect cell edit:

$scope.gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){

        })

Note:

Be sure that CSS class has higher specificity to change row background color.

But I have figured that it will need the grid to refresh to apply this css changes.