ui grid save updated cell data to database

Question

I am working on ui grid edit cell feature. I need to update the edited cell value to the database using rest api. Also how can i get the list of rows selected in controller.

My working code

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {  };

      $scope.gridOptions.columnDefs = [
        { name: 'id', enableCellEdit: false},
        { name: 'name' },
        { name: 'age', displayName: 'Age' , type: 'number', width: '10%' }
      ];


      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          $scope.gridOptions.data = data;
        });
    }])

Plunker

Answer 1

Add the following to your controller:

$scope.gridOptions.onRegisterApi = function(gridApi) {
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
    //Do your REST call here via $http.get or $http.post

    //Alert to show what info about the edit is available
    alert('Column: ' + colDef.name + ' ID: ' + rowEntity.id + ' Name: ' + rowEntity.name + ' Age: ' + rowEntity.age);
  });
};

You have all the information about which column was edited (in colDef.name) and what the actual values of the cells are (in rowEntity.xxx).

All you have to do now is call your REST API (to avoid unnecessary traffic, you could also compare newValue to oldValue to see if the content really was changed).

You don't need to reload the data, because the changes are already applied to the scope.

Find a forked Plunker here.

Second part of your question:

None of your rows are selectable. And this may get a bit complicated. Please start a new Question (with a new Plunker) about this issue.