I am working on a small interface that will display various data on the delivery of goods in ui-grid.
I have the following code:
HTML:
<body ng-controller="MyCtrl"> <p ng-repeat="row in myData">{{row.name}} works at {{row.company}}</p> <button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span> <br/> <br/> <div id="grid1" ui-grid="gridOptions" external-scopes="editRows" ui-grid-edit ui-grid-row-edit ui-grid-pinning ui-grid-paging ui-grid-cellnav class="grid"></div> </body>
AngularJS:
var app = angular.module('webapps', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.pinning', 'ui.grid.paging', 'ui.grid.cellNav']); app.controller('MyCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) { //Column definitions $scope.columns = [ { field: 'name', displayName: 'First Name', width: 300}, { field: 'lastname', displayName: 'Last Name', width: 300 }, { field: 'email', displayName: 'Email', width: 300 }, { field: 'company', displayName: 'Company', width: '50%' } ]; //Options for displaying the grid $scope.gridOptions = { data: 'myData', enableCellEditOnFocus: false, pagingPageSizes: [2, 5, 7], pagingPageSize: 5, enableSorting: true, enableGridMenu: true, columnDefs: $scope.columns, onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; //var cellTemplate = '<button class="btn primary" ng-click="getExternalScopes().showMe(rowCol.row.entity)">Edit</button>'; //'ui-grid/selectionRowHeader'; // you could use your own template here //$scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', width: 50, pinnedLeft: true, cellTemplate: cellTemplate }); gridApi.rowEdit.on.saveRow($scope, $scope.saveRow); } }; // Save row data on edit 1 - TESTING $scope.saveRow = function (rowEntity) { // create a fake promise - normally you'd use the promise returned by $http or $resource var promise = $http.post("Webapps/Home/SaveRow"); $scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise.promise); console.log(rowEntity); // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male" $interval(function () { if (rowEntity.lastname === ' ') { promise.reject(); } else { promise.resolve(); } }, 3000, 1); }; }]); // End of MyCtrl
My question is about the $ scope.saveRow method. I looked through the documentation here and tried to do a google search (not much for ui-grid), but I'm still dead because I'm a little inexperienced and I'm not sure how to code this correctly with promises.
The MVC application will work for this, which will handle the transfer of data to the foreground and saving changes to the table on SQL Server db. Obviously, I would like this $ scope.saveRow function to correctly send rowEnttiy data back to my MVC application, but again, I don’t understand how to encode the function. The “fake” promises included in the example are not enough for me to understand what I need to do, apparently. First I tried the following:
$scope.saveRow = function (rowEntity) { try { // Need actual URL for post...controller has to accept 'row' $http.post("Webapps/Home/SaveRow", { row: rowEntity }).success(function (data, status, headers, config) { console.log("post success"); console.log(rowEntity); }).error(function (data, status, headers, config) { console.log("post failure"); console.log(rowEntity); }); } catch (e) { alert("Something went wrong"); } };
but this only throws an exception in my console that the promise was not returned when the saveRow event was raised.