Search code examples
jqgridtreeautoloadtreegrid

jqGrid Autoloading Treegrid issue . .

I am having a problem with an autoloading tree grid. At present I have a structure that is only 2 levels deep.

1
    a
    b
    c 
2
    a

When I click to expand a node, the grid seems to add another instance of the root node again as well as whichever sub node(s) should have been shown based on the the root node selected.

1
1
    a
    b
    c

Here is a look at the XML before selecting the root node:

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <page>1</page>
    <total>1</total>
    <records>1</records>
    <row>
        <cell>1112</cell>
        <cell>Parent 1</cell>
        <cell>0</cell>
        <cell>NULL</cell>
        <cell>false</cell>
        <cell>false</cell>
    </row>
</rows>

And here is a look at the XML after selecting the root node:

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <page>1</page>
    <total>1</total>
    <records>1</records>
    <row>
        <cell>1112</cell>
        <cell>Parent 1</cell>
        <cell>0</cell>
        <cell>NULL</cell>
        <cell>false</cell>
        <cell>false</cell>
    </row>
    <row>
        <cell>5207</cell>
        <cell>Child 1</cell>
        <cell>1</cell>
        <cell>1112</cell>
        <cell>false</cell>
        <cell>false</cell>
    </row>
</rows>

Also, here is my config:

$(document).ready(function(){
    $("#gReport").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'company',
        url: document.forms['frmReport'].elements['gaddr'].value,
        datatype: 'xml',
        mtype: 'GET',
        colNames: ["ID", "Company"],
        colModel: [
            {name: 'id', index: 'id', width: 1, hidden: true, key: true},
            {name: 'company', index: 'company', width: 40, hidden: false, sortable: true}
        ],
        rowNum: -1,
        width: 980,
        height: 'auto',
        pager: false,
        caption: ''
    }),
});

Any help would be greatly appreciated. Thanks. -chris

Solution

  • The behavior which you described is really funny! The problem is that the child node "Child 1" is not marked as leaf (the line <cell>false</cell> after the <cell>1112</cell> is the isLeaf value). So after the user click on the "Child 1" all its children must be shown. Because the value for the column "loaded" is not defined in your input the tree grid try to load the children of the "Child 1" node having id=5207 from the server. So the request to the same url with additional parameters

    nodeid=5207&parentid=1112&n_level=1

    will be done. Because your server just ignore the parameters and get the same XML data back one see the crazy picture

    enter image description here

    (See the demo here). To fix the problem you should either mark the "Child 1" node as the leaf:

    <row>
    <cell>5207</cell>
    <cell>Child 1</cell>
    <cell>1</cell>
    <cell>1112</cell>
    <cell>true</cell> <!-- here the "false" was changed to "true" -->
    <cell>false</cell>
</row>

    and receive the following tree grid

    enter image description here

    (see the demo here) or add additional data in the XML file for the "loaded" column with the "true" value:

    <row>
    <cell>1112</cell>
    <cell>Parent 1</cell>
    <cell>0</cell>
    <cell>NULL</cell>
    <cell>false</cell> <!-- is leaf -->
    <cell>true</cell>  <!-- should be expanded -->
    <cell>true</cell>  <!-- is loaded -->
</row>
<row>
    <cell>5207</cell>
    <cell>Child 1</cell>
    <cell>1</cell>
    <cell>1112</cell>
    <cell>false</cell> <!-- is leaf -->
    <cell>false</cell> <!-- should be expanded -->
    <cell>true</cell>  <!-- is loaded -->
</row>

    and receive the grid

    enter image description here

    (see the demo here). I would recommend you to include "true" value for the "loaded" column in any way. The additional advantage which you receive is that you will be able to expand any node at the load time. In the last demo for example I set "true" value in the "expanded" column for the root node, so it will be expanded at the load time.