jqGrid treeGrid Expand Collapse not working

Question

I'm tryoing to set up a treeGrid using jqGrid 4.2.1 after some works visual it looks ok, but expanding collapsing does not work. Only the icon toggles, but the groups stays visible.

The setup is as follows

    $("#list").jqGrid({
                treeGrid: true,
                treeGridModel: 'adjacency',
                ExpandColumn: 'BreakdownTag',
                ExpandColClick: true,
                url: '/AsyncData/Breakdown.ashx',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Superior Tag', 'Breakdown Tag', 'Tag Description'],
                colModel: [
                    { name: 'SuperiorTag', id: 'SuperiorTag', index: 0, width: 250, 
hidden: true, align: 'left', sortable: false, classes: 'indeling', title: false },
                    { name: 'BreakdownTag', id: 'BreakdownTag', index: 1, width: 250,
 align: 'left', sortable: false, classes: 'indeling', title: false, visible: false },
                    { name: 'TagDescription', id: 'TagDescription', index: 2, width: 250,
 align: 'left', sortable: false, classes: 'indeling', title: false },],
                rowNum: 20000,
                viewrecords: true,
                loadui: "disable",
                emptyrecords: "Geen data gevonden...",
                height: "100%",
                treeIcons: { leaf: 'ui-icon-document-b' },
                loadonce: true,
                hoverrows: false
 }

            });

The json object is:

    {
    "total": 1,
    "page": 1,
    "records": 3,
    "rows": [
        {
            "i": 1,
            "cell": [
                "",
                "First",
                "Description for First",
                0,
                "null",
                false,
                true,
                true
            ]
        },
        {
            "i": 2,
            "cell": [
                "First",
                "Second",
                "Description for Second",
                1,
                "First",
                false,
                true,
                true
            ]
        },
        {
            "i": 3,
            "cell": [
                "Second",
                "Third",
                "Description for Third",
                2,
                "Second",
                false,
                true,
                true
            ]
        }
    ]
}

As said all ooks visual ok until clicking a node to collapse it (evreything shows expandend) the icon toggles, but the rows stay visible. I'm kinda clueless right now...

score 1 · Accepted Answer · answered Mar 13 '12 at 06:27

There are two error in JSON data and one minor error in the JavaScript code.

In JSON dada you should use id instead of i as the item id. To specify the parent element you should use the id instead of the the value from 'BreakdownTag' column (use 2 instead of "Second" in the example below):

{
    "i": 3,
    "cell": [
        "Second",
        "Third",
        "Description for Third",
        2,
        "Second",
        false,
        true,
        true
    ]
}

should be fixed to

{
    "id": 3,
    "cell": [
        "Second",
        "Third",
        "Description for Third",
        2,
        2,
        false,
        true,
        true
    ]
}

Additional minor JavaScript error is the usage of trailing comma at the end of colModel. The combination },] should be replaced to }].

The demo works correct after the changes.

That was the issue, thanx, for the complete solution and working example! Regards, from your dutch neighbour! — Arnoud Kooi, Mar 13 '12 at 19:40
@Arnoldiusss: You are welcome! dutch is really close to me. I visited it frequently before. After the children were burned - more seldom, but later probably more frequent with the whole family. — Oleg, Mar 13 '12 at 20:04

jqGrid treeGrid Expand Collapse not working

1 Answers1