CODEWITHSUNDEEP
angularjsangular-ui-grid
chris
chris

Reputation: 1216

How to save changes in Angular UI-Grid when using cell template?

I'm having trouble understanding where to begin when trying to save changes in a ui-grid cell template.When I went through the Ui-Grid tutorial all I found was how to save changes when there a single field mapped to a column: http://ui-grid.info/docs/#/tutorial/201_editable.

I created a simple grid as an example that has multiple input text fields in one column. How would you approach editing and saving changes to this grid? Using Kendo + razor + c# I was able to save changes in a column that had 8-9 variables in it. I'm having trouble understanding how to do this with the angular ui-grid.

All in all, I'd like the use to click a single save button outside of the grid once he or she is done editing data in the grid.

Here's a link to my simple grid example: http://plnkr.co/edit/IeYWL62Oa182crRUEtX4?p=info

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

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.gridOptions = {
      rowHeight: 40,
      enableHorizontalScrollbar: 0,
      enableVerticalScrollbar: 0,
    };

    $scope.gridOptions.columnDefs = 
    [{ name: 'id', width: 35},
     { name: 'template',
       cellTemplate: '<div><input type="text" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                     '<div><input type="text" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
    ];

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

Upvotes: 2

Views: 9233

Answers (2)

skubski
skubski

Reputation: 1606

This is a very naive way without any checking. It is only to illustrate you a way of tackling your problem.

The following piece of code will keep track of the objects that have been changed in your table. Keep in mind no checking has been done, you still have to filter doubles, remove object where changes have been undone perhaps etc... 

$scope.arrayOfChangedObjects = [];

$scope.objectHasChanged = function(object) {
    $scope.arrayOfChangedObjects.push(object);
};

Then a function to save.

$scope.save = function() {
  for(var i = 0; i < $scope.arrayOfChangedObjects.length; i++) {
      //do the saving
  }
};

Adjusting your template to call those methods. Note the grid.appScope.method()!

$scope.gridOptions.columnDefs = 
[{ name: 'id', width: 35},
 { name: 'template',
   cellTemplate: '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                 '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
];

And ofcourse letting ui-grid know you're using the edit module

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

<div ng-controller="MainCtrl">
  <button ng-click="save()">save</button>
  <div ui-grid="gridOptions" class="grid" ui-grid-edit></div>
</div>

Working plunker can be found here.

Upvotes: 9

Shimon Brandsdorfer
Shimon Brandsdorfer

Reputation: 1723

if you want to use their Edit Feature, you have to inject it into your module:

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

then in your html, you do:

<div ui-grid="gridOptions" class="grid" ui-grid-edit></div>

see plunker

Upvotes: 0

Related Questions