AngularJS and jqGrid

Question

I'm trying to find a simple example of integrating jqGrid with the framework of AngularJS (preferably as a directive that hosts the grid). This question was raised in SO jqGrid with AngularJS, but it was not fully answered. I do not wish to use another 3rd party library at this point. I would like to see the best practice of integrating jqGrid with AngularJS with just the controller and mv* style approach.

There is also an Angular jqGrid cookbook by Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook, but it uses the $route object which I'm not crazy about at this point. I'm not trying to build a SPA right now (perhaps later).

Can someone please point me to a simple example or something in JSFiddle? Thanks.

Answer 1

Disclaimers:

1. I've never heard of jqGrid before.

2. I don't have much jQuery experience.

3. From what I could tell its API isn't conducive to a 1-to-1 mapping of Angular's data-binding way of doing this vs. manual manipulation.

Here's what I came up with. It's a basic example of how to wrap this (or any probably) jQuery plugin with an Angular directive:

http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview

Let me know if there's a particular part of the jqGrid API you need help wrapping.

var myApp = angular.module('myApp', []);

myApp.directive('ngJqGrid', function () {
return {
  restrict: 'E',
  scope: {
    config: '=',
    data: '=',
  },
  link: function (scope, element, attrs) {
    var table;

    scope.$watch('config', function (newValue) {
      element.children().empty();
      table = angular.element('<table></table>');
      element.append(table);
      $(table).jqGrid(newValue);
    });

    scope.$watch('data', function (newValue, oldValue) {
      var i;
      for (i = oldValue.length - 1; i >= 0; i--) {
        $(table).jqGrid('delRowData', i);
      }
      for (i = 0; i < newValue.length; i++) {
        $(table).jqGrid('addRowData', i, newValue[i]);
      }
    });
  }
};
});

Answer 2

I cannot comment, so I post it here, it is the continuity of the question.. I'm also checking your github project luacassus, if I can, I will contribute to it. Nice feature, Words Like Jared. As you said, there is an other part of the API I would like to wrappe with Angular, it is the "pager", I managed it this way :

$scope.config = {
    ...
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    ...
};

And this in the directive :

link: function(scope,element,attrs){
            var table;
            scope.$watch('config', function (newValue) {
                element.children().empty();
                table = angular.element('<table id=\'grid2\'></table>');
                pager = angular.element('<div id=\'pager2\' ></div>');
                element.append(table);
                element.append(pager);
                $(table).jqGrid(newValue);
            });

But I would like to get rid fo the ID, entered the hard way here. After that I will try to use the API like you in order to implement the cell/row/navbar editing possible. (To modify the scope data by modifying data inside the grid... if someone has already something...)