jqGrid initialized empty when using JSON data

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.

Did you try debugging using Firebug or something else to see if the JSON is actually loaded properly? It looks like it's the JSON that can not be found. — Björn, Jun 23 '11 at 11:20
Yeah, that's the problem. I doesn't seem to find the .json file (maybe I wasn't clear enough on this part). — nicohvi, Jun 23 '11 at 11:40
That's quite weird. I've made a basic test with your options and your JSON and everything seems to work just fine. I had to comment out the `pager` attribute though, but I doubt that's the cause of your problem. A working example can be found here: http://minvis.nl/jqGrid/tree.html Maybe it's of some use to you. — Björn, Jun 23 '11 at 12:05

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

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.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 23 '11 at 12:11

Oleg

220,925
34
403
798

Thank you both very much for your help! :-) Turns out it was an external error regarding the project configuration causing the error. I will make good use of both of your demos! – nicohvi Jun 23 '11 at 12:55

jqGrid initialized empty when using JSON data

1 Answers1