0

I'm using JqGrid with directive for angularJS. for example, I'm using code from this jqgrid loading json datas from server into treegrid doesn't display datas

this is directive:

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

And this is code from angular controller:

$scope.data = {};
            $http.get('home/GetDataJson').success(function (data, status, headers, config) {
                $scope.config = {
                    datatype: "json",
                    colNames: ['id', 'Prestations'],
                    colModel: [
                        { name: 'id', width: 100, key: true },
                        { name: 'name', width: 785, sortable: false }
                    ],
                    sortname: 'id',
                    sortorder: "asc",
                    treeGrid: true,
                    treeGridModel: "adjacency",
                    ExpandColumn: 'name',
                    ExpandColClick: true,
                    jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
                    height: "auto"
                }

                $scope.data = data;
            });

This is JSON data:

[
    {
        "id": "1",
        "name": "ECHANGEUR",
        "level": "0",
        "parent": "null",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1",
        "name": "Intervention Aller sur Site",
        "level": "1",
        "parent": "1",
        "isLeaf": false,
        "expanded": false,
        "loaded": true
    },
    {
        "id": "1_1_1",
        "name": "Date et heure d'arrivée sur le site",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    },
    {
        "id": "1_1_2",
        "name": "Consignation de l'échangeur",
        "level": "2",
        "parent": "1_1",
        "isLeaf": true,
        "expanded": true,
        "loaded": true
    }
]

Grid is appears, but treeGrid feature doesn't work. Instead of all rows are expanded, so we can think than it just grid, but not treeGrid. May be problem in directive. Please help me! Thank you!

To see my problem please open this link http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview and replace 2 files HTML and JavaScript JS:

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

myApp.controller('MyController', function($scope) {

  $scope.config = {
    datatype: "local",
    colNames: ['id', 'Prestations'],
    colModel: [{
      name: 'id',
      width: 100,
      key: true
    }, {
      name: 'name',
      width: 785,
      sortable: false
    }],
    sortname: 'id',
    sortorder: "asc",
    treeGrid: true,
    treeGridModel: "adjacency",
    ExpandColumn: 'name',
    ExpandColClick: true,
    jsonReader: {
      repeatitems: false,
      root: function(obj) {
        return obj;
      }
    },
    height: "auto"
  }

  $scope.data = [{
    "id": "1",
    "name": "ECHANGEUR",
    "level": "0",
    "parent": "null",
    "isLeaf": false,
    "expanded": false,
    "loaded": true
  }, {
    "id": "1_1",
    "name": "Intervention Aller sur Site",
    "level": "1",
    "parent": "1",
    "isLeaf": false,
    "expanded": false,
    "loaded": true
  }, {
    "id": "1_1_1",
    "name": "Date et heure d'arrivée sur le site",
    "level": "2",
    "parent": "1_1",
    "isLeaf": true,
    "expanded": true,
    "loaded": true
  }, {
    "id": "1_1_2",
    "name": "Consignation de l'échangeur",
    "level": "2",
    "parent": "1_1",
    "isLeaf": true,
    "expanded": true,
    "loaded": true
  }];
});

HTML:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqgrid@*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
    <script data-require="jqgrid@*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyController">
    <ng-jq-grid config="config" data="data"></ng-jq-grid>
  </body>

</html>

Sorry for my small experience :) Thank you!

Community
  • 1
  • 1
Alexander Velilyaev
  • 1
  • 1
  • Which version of jqGrid and which fork ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or some old jqGrid in version <=4.7) you use? Could you provide the demo (JFSiddle demo for example), which demonstrate your attempts? What `datatype` you want to use? The option `datatype: "json"` means loading from `url` parameter. Probably you want to use `datatype: "local"` or `datatype: "jsonstring"`? Filling of TreeGrid using `addRowData` is not the best choice especially is you use 0,1,... as ids instead of usage id from the data. – Oleg Dec 06 '15 at 23:44
  • Tnakks for answer! version of jqGrid - 4.6.0 I tried this example http://stackoverflow.com/questions/15204930/jqgrid-loading-json-datas-from-server-into-treegrid-doesnt-display-datas in my application. All works fine. But if I'm using jqGrid via angular, then it work's without tree – Alexander Velilyaev Dec 07 '15 at 14:14
  • @Oleg, please see Description. I fixed content. Please, help me. Thank you very much! – Alexander Velilyaev Dec 07 '15 at 16:08
  • i've solved this issue. Just changed directive: scope.$watch('data', function (newValue, oldValue) { table[0].addJSONData({ rows: newValue }); }); – Alexander Velilyaev Dec 08 '15 at 11:23
  • Consider to use `datatype: "local"` first of all. To replace the data in the local grid you can first get **the reference** to internal object which contains *all* options of jqGrid: `var p = $(table).jqGrid("getGridParam");` then you can just use `p.data = [];` to clear the data or to replace the data to new array of items using `p.data = newValue;`, You can modify array `p.data` in any way like you want (delete some items or push some new items). Finally you need `$(table).trigger("reloadGrid");` which will do all required action inclusive *sorting of data* and calling of `addJSONData`. – Oleg Dec 08 '15 at 11:31
  • In any way I would recommend you to post the URL to [JSFiddle](http://jsfiddle.net/) or [Plunker](http://plnkr.co/). Sharing the solution with other if the main goal of stackoverflow. Moreover if you post your code then other people could probably improve it and you will have additional benefits. By the way Plunker "knows" free-jqgrid 4.11.1 URLs. Alternatively you can use URLs described in [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). Using of old jqGrid 4.5.2 today have really not much sense. – Oleg Dec 08 '15 at 11:39
  • By the way I could see the link to old Plunker in your question to display the standard grid. I modified it to http://plnkr.co/edit/qxFr7fwbPkyNMziZEiqN?p=preview – Oleg Dec 08 '15 at 12:21

1 Answers1

0
scope.$watch('data', function (newValue, oldValue) {
                table[0].addJSONData({
                    rows: newValue
                });

            });
Alexander Velilyaev
  • 1
  • 1