jqGrid TreeGrid problems

Question

Can anyone explain to my what I may be doing wrong please?

I have the following code:

function initTable() {


mydata = [{ "id": "1", "brandName": "7 Crown With Honey", "quality": "Standard", "minorRegionName": "North America", "year00": "", "year01": "", "level": "0", "parent": "", "isLeaf": "false", "expanded": "false" },
            { "id": "2", "brandName": "Amaretto di Florio", "quality": "Standard", "minorRegionName": "North West Europe", "year00": "", "year01": "", "level": "1", "parent": "1", "isLeaf": "true", "expanded": "false" },
            { "id": "3", "brandName": "Aniversario Rum", "quality": "Super Premium", "minorRegionName": "South America", "year00": "5", "year01": "6", "level": "1", "parent": "1", "isLeaf": "true", "expanded": "false" },
            { "id": "4", "brandName": "Archers", "quality": "Standard", "minorRegionName": "Asia", "year00": "2", "year01": "1", "level": "0", "parent": "", "isLeaf": "false", "expanded": "false" }
         ];

$("#list2").jqGrid({
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'brandName',

            data: mydata,
            datatype: 'local',
            height: 300,

            colNames: ['brandName', 'minorRegionName','quality', 'year00', 'year01'],
            colModel: [{ name: 'brandName', index: 'brandName', width: 200 },
                                { name: 'minorRegionName', index: 'minorRegionName', width: 200 },
                                { name: 'quality', index: 'quality', width: 100},
                                { name: 'year00', index: 'year00', width: 80, align: "right", sorttype: "float", formatter: "number" },
                                 { name: 'year01', index: 'year01', width: 80, align: "right", sorttype: "float", formatter: "number"}],

        rowNum: 30,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'brandName',
        pgtext: "Page {0} of {1}",
        });


    $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
    //$("#list2").setGridParam({ datatype: 'local', page: 1, rowNum: 20 }).trigger('reloadGrid');
    }

Which, quite simply, doesn't produce a TreeGrid with nested rows.

I know the data is working fine, because if I comment out:

treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'brandName',

Sure enough the data displays.

I'm pretty sure it's something obvious, but can't see what it is.

Are you sure that the word ExpandColumn is camel cased well? Shouldn't you write the first letter of it lowercase? — kisp, Sep 13 '12 at 14:00
Thought that myself to be honest, have tried both methods and still not working though. (the 'ExpandColumn' was copied direct from the jqGrid website) — JasonMHirst, Sep 13 '12 at 14:09

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

The main problem is that TreeGrid don't support datatype: "local". So you have to add the data manually with respect of addJSONData (see the answer) or use datatype: "jsonstring", datastr: mydata and additional jsonReader (see here).

Your demo can be modified for example to the following demo.

edited May 23 '17 at 11:49

Community

1
1

answered Sep 13 '12 at 16:07

Oleg

220,925
34
403
798

Oleg, perfectly easy to understand answer, thank you so much. And glad to see your example confirms the "ExpandColumn" too, just so I (others?) know for the record. Again my thanks for such an understandable answer. – JasonMHirst Sep 14 '12 at 06:44
@JasonMHirst: You are welcome! jqGrid seems be developed without clear name conversion. So there are options like `ExpandColumn`, `datatype` and `colNames` instead of common style or names like `expandColumn`, `dataType` and `colNames` for example. If you use jqGrid you have to follow the existing names. – Oleg Sep 14 '12 at 07:01

jqGrid TreeGrid problems

1 Answers1