ng-blur event does not work on ui-grid cell template

Question

Here is the sample code. I have a cell template (text box) within ui-grid. I would like to use ng-blur event when the value of text box changes but this event does not fire.

 {
    name: "Amount", displayName: "Amount", enableFiltering: false,

    cellTemplate: '<input type="text" ng-model="row.entity.Amount" ng-blur="updateEntity(row.entity)"></input>'
 }

Has anyone cross this scenario or used ng-blur within ui-grid's cell template. Thank you.

un.spike un.spike · Accepted Answer · 2016-02-06T10:11:35

u can use native api for that:

$scope.gridOptions.onRegisterApi = function(gridApi){
     //set gridApi on scope
     $scope.gridApi = gridApi;
     gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};

$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );

// or call your logics here with returning promise.reject() - on error or promise.resolve() - on success

// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
  if (rowEntity.gender === 'male' ){
    promise.reject();
  } else {
    promise.resolve();
  }
}, 3000, 1);

tutorial link http://ui-grid.info/docs/#/tutorial/205_row_editable

ng-blur event does not work on ui-grid cell template

1 Answers