Directive module for free-jqgrid 4.13.0
First, make sure to add free-jqgrid 4.13.0 to your project, as explained in free fork of jqGrid's ReadMe since we don't bundle free-jqgrid for you.
Add 'angular-jqgrid' to the list of dependencies in your Angular.JS application:
angular.module('myapp', [
'ngMaterial',
'ngMessages',
// ...
'angular-jqgrid'
]);In your controller, create two variables to hold the dataset and jqGrid options:
angular.module('myapp').controller('MyController', function($scope) {
$scope.myData = [{"fieldName1" : "row1-col1", "fieldName2" : "row1-col2", "fieldName3" : "row1-col3"},
{"fieldName1" : "row2-col1", "fieldName2" : "row2-col2", "fieldName3" : "row2-col3"}];
$scope.myGridOptions = {
colNames : ['columnName1', 'columnName2', 'columnName3'],
colModel : [{ name : 'fieldName1'}, { name : 'fieldName2', align : 'center'}, { name : 'fieldName3', align : 'center'}]
};In your view or template, add the 'jq-grid' directive, making sure to specify both the 'dataset' and 'options' attributes, pointing to the scope variables defined above:
<jq-grid dataset="myData" options="myGridOptions"></jq-grid>The grid is created in a 'table' element as a child of the 'jq-grid' directive.