Saving row data with AngularJS ui-grid $scope.saveRow

Asked 9/12, 2014 at 15:49 Answered 18/6, 2015 at 11:6

Solved angularjs angular-ui angular-ui-grid

I'm working on a small frontend application which will show various product shipping data in a 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 in regards to the $scope.saveRow method. I've looked over the documentation here and tried searching on google (not much out there for ui-grid) but I'm still hitting a dead end as I'm a bit inexperienced with this and I'm not sure how to code this properly with promises.

There will be an MVC app running behind this which will handle pushing the data to the front end and saving table edits to a SQLServer db. Obviously what I'd like to do is have this $scope.saveRow function properly send the rowEnttiy data back to my MVC app but, again, I'm at a loss for how to code the function. The "fake" promises included in the example aren't enough for me to get a grasp on what I need to do, apparently. I initially 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 a promise was not returned when the saveRow event is raised.

Spitball answered 9/12, 2014 at 15:49 Comment(0)

You would normally do the promise/api call in a separate repository, but basically the code you are looking for is something like this:

 $scope.saveRow = function( rowEntity ) {

    var promise = $scope.someRepositoryFunction(rowEntity);
    $scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);

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

$scope.someRepositoryFunction = function(row) {
    return $http.put('/Home/UpdateRow',row);
}

Resinate answered 15/1, 2015 at 3:48 Comment(7)

For some reason the $scope.gridApi.grid portion of the setSavePromise method is missing from the documentation, so thanks for posting this. I have been banging my head against a wall for over an hour trying to get this to work. – Geesey 28/1, 2015 at 23:12

There is no reason to create a new promise. Simply return the promise that $http provides – Groth 21/8, 2015 at 9:40

Just to clarify, @codemonkey's comment referred to an earlier version of this answer which has now been corrected. Thanks @codemonkey! – Clamatorial 5/5, 2016 at 15:44

Do you need the $scope.gridApi.grid parameter for this to work? – Eula 31/5, 2016 at 22:54

@Eula I was able to get my call firing without the $scope.girdApi.grid parameter – Sulphurous 7/6, 2017 at 19:28

adding the $scope.gridApi.grid results in errors. Wasted an hour trying to figure out. – Kazoo 20/6, 2017 at 12:4

Yep, using 4.2.4 and the call should be $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise); without $scope.gridApi.grid – Bookshelf 19/3, 2018 at 11:50

I'm not allowed to comment so I have to submit an answer. The answer above is incorrect in that the $scope.gridApi.grid parameter to teh setSavePromise function is NOT required. Although the function does require a grid parameter, it is added by the wrapper during the .apply call.

Chowder answered 12/2, 2015 at 2:31 Comment(0)

I had actually used the code submitted by punkologist and it was indeed working but there seemed to be errors in the console on resolving promise after including $interval.

I guess the following is the appropriate code to make it run error free. Hope it works.

$scope.saveRow = function( rowEntity ) {

var promise = $q.defer();
$http.put('/Home/UpdateRow',row).success(function(){
$interval(function(){
     promise.resolved();
     },3000, 1)
}).error(promise.reject);

$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
};

Lectionary answered 18/6, 2015 at 11:6 Comment(0)

Recommended topics

Hot tags