javascript - Not able to save row in Expandable row in Angular UI Grid -

i'm trying use row saving feature in combination expandable grid. goal able save sub-grid rows, independently of parent row.

$scope.gridoptions = {   expandablerowtemplate: 'components/grid/orderlinetemplate.html',   expandablerowheight: 150,    expandablerowscope: {     subgridvariable: 'subgridscopevariable'    },   columndefs: [     {field: '_id'},     {field: 'number'}   ] };  $http.get(order_api)   .success(function (data) {     (var = 0; < data.length; i++) {       var rowscope = data[i];       rowscope.subgridoptions = {         appscopeprovider: $scope,         columndefs: [           {field: 'amount'},           {field: 'packageamount'},           {field: 'carrieramount'}         ],         data: rowscope.orderlines,         saverow : $scope.saverow       }     }     $scope.gridoptions.data = data;   });  $scope.gridoptions.onregisterapi = function (gridapi) {   $scope.gridapi = gridapi;   gridapi.rowedit.on.saverow($scope, $scope.saverow); };  $scope.saverow = function (order) {   var promise = $q.defer();   $scope.gridapi.rowedit.setsavepromise(order, promise.promise);   if(order.number) {     $http.put(order_api + '/' + order._id, order).success(function () {       promise.resolve();     }).error(function () {       promise.reject();     });   }  } }); 

the saverow function called correctly when edit field in parent row. when edit field in sub-row, following message appears in console;
'a promise not returned when saverow event raised, either nobody listening event, or event handler did not return promise'
saverow never called expanded sub-row.

you need register subgrid apis. each grid has own separate api instance use communicate it:

rowscope.subgridoptions = {   appscopeprovider: $scope,   columndefs: [     {field: 'amount'},     {field: 'packageamount'},     {field: 'carrieramount'}   ],   data: rowscope.orderlines,   saverow : $scope.saverow,   onregisterapi: function (gridapi) {     gridapi.rowedit.on.saverow($scope, $scope.saverow)   } } 

that's close, you're injecting our controller scope subgrid scope appscopeprovider, don't need do. instead, can make saverow generic , bind gridapi want. first argument of bind() sets this function. we'll pass in grid object, won't need it. second argument bind gridapi want pass. in saverow definition know we'll receive right api first argument, , rowentity second arg.

// main grid: $scope.gridoptions.onregisterapi = function(gridapi) {   gridapi.rowedit.on.saverow($scope, saverow.bind(gridapi.grid, gridapi)); };  // subgrids: onregisterapi: function(gridapi) {   gridapi.rowedit.on.saverow($scope, saverow.bind(gridapi.grid, gridapi)); }  // altered saverow: function saverow(gridapi, rowentity) {   var promise = $q.defer();   gridapi.rowedit.setsavepromise( rowentity, promise.promise );    // fake delay of 3 seconds whilst save occurs, return error if gender "male"   $interval( function() {     if (rowentity.gender === 'male' ){       promise.reject();     } else {       promise.resolve();     }   }, 3000, 1); }; 

since you'll have different save function subgrids main thing remember register "saverow" event on them onregisterapi

here's working plunker demonstrating code above: http://plnkr.co/edit/52mp9c?p=preview