Detecting cell changes in angular.js and ng-grid

Question

I've racked my brain but am unable to figure out how to detect the cell data change in ng-grid. The following snippet is using ng-change which does correctly call save(), but it's not the trigger I want since it gets called for any keyed entry. I need to know when the editing of the cell is complete.

Any help would be appreciated.

angular.module('controllers', ['ngGrid']).
controller('ContactsListCtrl', ['$scope', 'Contacts', function ($scope, Contacts) {
    var editableCellTemplate = '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-change="save()"/>';

    Contacts.get(function(data) {
        $scope.contacts = data;

    });
    $scope.gridOptions = {
        data: 'contacts',
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEdit: true,
        showSelectionCheckbox: true,
        columnDefs: [
            {field: 'lastName', displayName: 'Last Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'firstName', displayName: 'First Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'email', displayName: 'EMail Address', enableCellEdit: true, editableCellTemplate: editableCellTemplate},
            {field: 'phone', displayName: 'Phone', enableCellEdit: true, editableCellTemplate: editableCellTemplate}
        ]
    };
    $scope.save = function() {
        $scope.contact = this.row.entity;
        Contacts.save($scope.contact);
    }
}]);

Parrie

Answer 1

This should do the trick, and give you your complete edited row, when one the cell has been edited. Which you can then save / update

$scope.$on('ngGridEventEndCellEdit', function(event) {
    $scope.contact = event.targetScope.row.entity;
    Contacts.save($scope.contact);
    // console.log($scope.contact );
});

Aquarelle

if you have two (or more) grids in the same scope, how do you know which of these grids fired the ngGridEventEndCellEdit event? – Mountbatten

Using 'event.targetScope.gridId' you can identify which grid has emitted this event. – Amitosis

Answer 2

If you're using UI Grid 3.0 OR 4.x you should wait for: uiGridEventEndCellEdit

$scope.$on('uiGridEventEndCellEdit', function (data) {
    console.log(data.targetScope.row.entity);
});

Levo

Answer 3

You should be able to listen for the ngGridEventEndCellEdit event:

$scope.$on('ngGridEventEndCellEdit', function(data) {
  console.log(data);
});

This is described in not much detail at: https://github.com/angular-ui/ng-grid/wiki/Grid-Events.

Unfortunately I haven't worked out yet how this event tells me which row/cell we've finished editing, so that I can save it. But it's perhaps a start.

Alternatively, this question on stackoverflow seems to have a good answer that involves an ng-blur directive: AngularJS and ng-grid - auto save data to the server after a cell was changed

Metcalfe

Answer 4

i hope this will help someone. I too needed the name of the grid in the ngGridEventEndCellEdit event.

using jquery inside the function:

$scope.$on('ngGridEventEndCellEdit', function (data) {
var gridName = $('.' + data.targetScope.gridId).attr('ng-grid');
});

Renoir

Answer 5

You could create a blur directive and call the save function when the input loses focus.

app.directive('ngBlur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngBlur']);
    element.bind('blur', function(event) {
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);

Droopy

Answer 6

For ui-grid 3.0.6 I did use the afterCellEdit event.

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

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

        if(newValue != oldValue){
          // Do something.......
          // colDef.field has the name of the column that you are editing
        }

      });

}

Meli