The ui grid saves updated cell data in the database

Question

I am working on a cell function for editing a ui grid. I need to update the changed value of a cell in the database using rest api. Also how can I get a list of strings selected in the 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 the 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 has been edited (in colDef.name ) and what are the actual cell values ​​(in rowEntity.xxx ).

All you have to do is call your REST API (to avoid unnecessary traffic, you can also compare newValue with oldValue to see if the content has really been changed).

You do not need to reload the data because the changes are already applied to the area.

Find the forked plunker here.

The second part of your question:

None of your rows can be selected. And it can get a little harder. Please start a new question (with the new Plunker) about this issue.