AngularJS and ui-grid interaction using $resource

Question

I am brand new to angular JS and obviously to ui-grid as well. I got data to display in a grid using $resource and am trying to move to the next level by allowing editing and saving of rows etc.

I used Saving row data with AngularJS ui-grid $scope.saveRow as an example and created the Plunker http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5 to try it. But, for some reason I can't fathom, mine doesn't work and in fact it generates an exception at the line: gridApi.rowEdit.on.saveRow(self, self.saveRow);

And I am at a total loss to understand why. I realize that the saveRow function is empty, but the goal at this stage is simply to get it called when the row has been edited.

Any help would be greatly appreciated.

The code of the Plunker follows:

(function() {
    var app = angular.module('testGrid', ['ngResource', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit' /*, 'ui.grid.cellNav'*/ ]);

    app.factory('Series', function($resource) {
       return $resource('/api/series/:id', {
          id: '@SeriesId'
       });
    });

    var myData = [{
        SeriesId: 1,
        SeriesName: 'Series 1'
    }, {
        SeriesId: 2,
        SeriesName: 'Series 2'
    }];

app.directive('gridContent', function() {
var deleteTemplate = '<input type="button" value="Delete" ng-click="getExternalScopes().deleteRow(row)" />';
var commandheaderTemplate = '<input type="button" value="Add Series" ng-click="getExternalScopes().addNew()" />';

return {
  restrict: 'E',
  templateUrl: 'grid.html',
  controllerAs: 'gridseries',
  controller: function(Series) {
    var self = this;

    this.saveRow = function(rowEntity) {
      i = 0;
    };

    this.gridOptions = {};
    this.gridOptions.columnDefs = [{
      name: 'SeriesId',
      visible: false
    }, {
      name: 'SeriesName',
      displayName: 'Name',
      enableCellEdit: true
    }, {
      name: 'Command',
      displayName: 'Command',
      cellTemplate: deleteTemplate,
      headerCellTemplate: commandheaderTemplate
    }];

    this.gridOptions.onRegisterApi = function(gridApi) {
      self.gridApi = gridApi;
      gridApi.rowEdit.on.saveRow(self, self.saveRow);
    };

    this.gridOptions.data = myData;

    this.gridScope = {
      deleteRow: function(row) {
        var index = myData.indexOf(row.entity);
        self.gridOptions.data.splice(index, 1);
      },

      addNew: function() {
        self.gridOptions.data.push({
          SeriesName: 'Add a name'
        });
      }
    };
  }
};

});
})();

I have no idea why the code didn't cut and paste properly but all the code is in the Plunker any way.

Thanks in advance.

PaulL · Accepted Answer · 2015-03-15 23:49:14Z

0

I think the main problem here is that you're using a controller as syntax, rather than the $scope setup. Registering an event requires a $scope, as the event handler is then removed again upon the destroy event of that $scope.

A shorthand workaround is to use $rootScope instead, but this may over time give you a memory leak.

gridApi.rowEdit.on.saveRow($rootScope, self.saveRow);

Refer: http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5?p=preview

Since this code was also a bit old, I had to update to the new appScope arrangements rather than externalScope.

answered Mar 15, 2015 at 23:49

PaulL

6,6503 gold badges37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS and ui-grid interaction using $resource

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related