Failed to save row in extensible row in Angular UI grid

Question

I am trying to use the string save function in conjunction with an extensible network . The goal is to be able to save subnet lines, regardless of the parent line.

$scope.gridOptions = { expandableRowTemplate: 'components/grid/orderLineTemplate.html', expandableRowHeight: 150, expandableRowScope: { subGridVariable: 'subGridScopeVariable' }, columnDefs: [ {field: '_id'}, {field: 'number'} ] }; $http.get(ORDER_API) .success(function (data) { for (var i = 0; i < 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 is called correctly when I edit a field in the parent line. When I edit a field in a substring, the following message appears on the console:
"The promise was not returned when the saveRow event was raised, or no one was listening to the event, or the event handler did not return the promise" SaveRow is never called for the extended substring.

Answer 1

You need to register the subgrid APIs. Each grid has its own separate instance of the API, which you use to communicate with 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) } } 

This is close, but you enter our controller area into the subgrade area using appScopeProvider, which you really don't need to do. Instead, we can create a generRow generic and bind it to the gridApi we want. The first argument to bind() sets this to the function. We just pass the mesh object, but we don’t need it. The second argument to bind will be the gridApi we want to pass. Then in the definition of saveRow we know that we will get the right API as the first argument, and then rowEntity as the 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 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); }; 

Since you will probably have a different save function for your subgrid, the main thing to remember is to register the "saveRow" event on all of them using onRegisterApi

Here's a working plunk showing the code above: http://plnkr.co/edit/52mp9C?p=preview

Answer 2

If you use Angular $ http or $ resource, you don’t need to create any other “deferred” objects, just return the result:

 $scope.saveRow = function (order) { // with use $http var promise = $http.put(ORDER_API + '/' + order._id, order); // or with use $resource var promise = $resource(ORDER_API + '/:id').save({ id: order._id }, order).$promise; $scope.gridApi.rowEdit.setSavePromise(order, promise); return promise; } 

Answer 3

You have already created a deferred promise in code. Since the error explicitly says that you need to return the promise, you should add return deferred.promise; into your code. I think you should also return a promise from another statement in order to get a promise to approve / reject one way or another.

code

 $scope.saveRow = function(order) { var deferred = $q.defer(); $scope.gridApi.rowEdit.setSavePromise(order, promise.promise); if (order.number) { $http.put(ORDER_API + '/' + order._id, order).success(function() { deferred.resolve(); }).error(function() { deferred.reject(); }); } else { deferred.reject(); } return deferred.promise; //this will return promise to caller function. }; 

Hope this helps you let me know if anything else is needed. Thank you. :)