detect cell edit in angular ui-grid

Question

I try to detect cell edit but the following code does not get event. I use "name": "angular-ui-grid", "version": "3.0.0-rc.14", Do I have to define some configuration to get events?

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

Answer 1

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.

Answer 2

You can use the beginCellEdit event:

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