Question

I’ve been lurking around on various forums, and reading several stackoverflow questions related to this problem, but I can’t for the life of me figure out what’s wrong.

I try to generate a jqGrid treeGrid, using the following code:

      jQuery("#structureBuilderTable").jqGrid({
        url: 'tree.json',
        datatype:'json',
        mtype:'GET',
        colNames: ["ID", "Description", "Total"],
        colModel: [
        {name:'id', index:'id', width: 1, hidden: true, key: true},
        {name:'desc', index:'desc', hidden: false, sortable: true},
        {name:'num', index:'num', hidden: false, sortable: true}
        ],
        treeGridModel:'adjacency',
        height:'auto',
        width:'500',
        pager:"#ptreegrid",
        treeGrid: true,
        ExpandColumn:'desc',
        ExpandColClick: true,
        caption:"TreeGrid Test"
      });

This is my .json file (for example purposes):

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
           {"id": "1", "cell": ["1", "Super Item", "300", "0", "null", "false", "false"]},
           {"id": "2", "cell": ["2", "Item 1", "100", "1", "1", "false", "false"]},
           {"id": "3", "cell": ["3", "Sub Item 1", "50", "2", "2", "true", "true"]},
           {"id": "4", "cell": ["4", "Sub Item 2", "25", "2", "2", "false", "false"]},
           {"id": "5", "cell": ["5", "Sub-sub Item 1", "25", "3", "4", "true", "true"]},
           {"id": "6", "cell": ["6", "Sub Item 3", "25", "2", "2", "true", "true"]},
           {"id": "7", "cell": ["7", "Item 2", "200", "1", "1", "false", "false"]},
           {"id": "8", "cell": ["8", "Sub Item 1", "100", "2", "7", "false", "false"]},
           {"id": "9", "cell": ["9", "Sub-sub Item 1", "50", "3", "8", "true", "true"]},
           {"id": "10", "cell": ["10", "Sub-sub Item 2", "50", "3", "8", "true", "true"]},
           {"id": "11", "cell": ["11", "Sub Item 2", "100", "2", "7", "true", "true"]}
    ]
}

(this is pretty much a direct copy of a guide I found online).

Now, the grid is generated, but it doesn’t contain any data. The javascript file is in the same directory as ‘tree.json’, but somehow it doesn’t seem to find it. I used the following for debugging purposes:

loadError: function(xhr, status, error) {alert(status +error)}

and this is the alert I got:

errorNot Found

Any help would be greatly appreaciated.

Answer 1

I hope that the demo created based on your JSON data and the jqGrid will help you to find the error in your code. Probably you just forgot to place the code which create the grid inside of jQuery(function(){/**/});.

Only one tip: If you would like that some tree node will be shown expanded like in my demo, you will have to set not only the “true” value in the last column (“expanded” hidden column), but add “true” value for the hidden “loaded” column of the tree grid. See here and here for more details.