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

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('');
      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]);
      }
    });
  }
};
});