Angular Ui-Grid ng-blur event does not fire

Question

I am using Angular UI-Grid v3.0.4. I am using columndef cell-template to get the required customization as below (I have ng-blur event and method within celltemplate).

   $scope.gridOptions = {
           showColumnFooter: true,
           columnDefs: [
                        {
                            name: "SalesAmount", displayName: "Sales Amount"
                        },
                        {
                            name: "CommissionAmount", displayName: "Commission Amount", enableCellEdit: true, enableCellEditOnFocus: true,
                            cellTemplate: '<input type="text" ng-model="row.entity.pddCommissionAmount" ng-blur="updateEntitys(row.entity)"></input>'
                        }

                       ]
                     };

ng-blur event does not fire its execution. Researched and add a custom ngblur directive to see if that helps

app.directive('ngBlur', function () {
    return function (scope, elem, attrs) {
        elem.bind('blur', function () {
            scope.$apply(attrs.ngBlur);
        });
    };
});



$scope.updateEntitys = function (row) {
             alert("Update Entitys within ngblur event");
         }

This does not seem work either. Greatly appreciate any help with this.

ippi ippi · Accepted Answer · 2016-03-01T22:22:59

I don't know much about ui-grid but I'm fairly sure that the reason to why it doesn't work is that the html in the so called "cellTemplate" is never compiled because it's not actually an angular template. I believe you could find a way around it using $compile, passing the html to the cellTemplate while saving the object to some variable, but I also think that would be an incredibly convoluted way to do what you want (whatever that is?).

Instead, I think you should have a look at the ui-grid documentation about the edit-feature: http://ui-grid.info/docs/#/tutorial/201_editable

I think this is what you actually want:

$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
    console.log('edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue);
    $scope.$apply();
  });
};

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

Angular Ui-Grid ng-blur event does not fire

1 Answers