Niner Niner - 4 months ago 504
AngularJS Question

AngularJS and jqGrid

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

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