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) {

Boeschen

Credit goes to mainguy. #27731326 – Reverberatory

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.

Couture

I found this in the tutorial link – Couture

Answer 2

You can use the beginCellEdit event:

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

Intergrade

Answer 3

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.

Rule

My purpose is to color the row if user edits data. I want to show user clearly which lines are edited. – Boeschen

Answer 4

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.

Anisometric