app.directive('ngJqGrid', function ($compile) {

console.log("Directive called");

var link = function (scope, element, attrs) {
    scope.$watch("config", function (newValue) {
        element.children().empty();
        var table = angular.element('<table id="' + newValue.id + '"></table>');

        element.append($compile(table)(scope));

        angular.extend(newValue, {
            datatype: 'json',
            myType: 'GET',
            contentType: "application/json; charset-utf-8",
            jsonReader: {
                root: 'Data',
                page: 'Page',
                total: 'TotalPages',
                records: 'Count',
                repeatitems: false,
            },
            loadComplete: function () {
                $compile(angular.element('#' + newValue.id))(scope);
            },
            autowidth: true,
            //altRows: true,
            pager: true,
            pageinput: true,
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            sortable: true,
            viewrecords: true,
            emptyrecords: "No records to view",
            loadtext: "Loading..."
        })

        angular.element(table).jqGrid(newValue);
    });
};

return {
    restrict: 'E',
    scope: {
        config: '=',
    },
    link: link
}