jqGrid Autoloading Treegrid issue . .

Question

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

Bushcraft

Answer 1

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

(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

(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

(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.

Conflagration

Thank you for your response. I have added the additional field you suggested for "is loaded". Thus on first load the field says false. Upon clicking the parent to expand the field then says true, however this ends with the same behavior. I have the parent repeated but with the second instance showing the child underneath. Also I cannot mark the first child as the leaf because that second level is expandable as well (my structure is 3 levels deep). Any ideas? – Bushcraft

@cra: You should just add <cell>true</cell> at the end of all <row> elements of your xml file. It means that all nodes have "true" as "loaded" property. It means that the XML file contain full data and no additional requests to the server should be send to retrieve the child notes. – Conflagration

Thanks again for your response. When I add a <cell>true</cell> to the end of each node, the parent node will no longer cause another request to the server. Meaning it will not receive Child info back. I must be missing something here. I am using Fiddler to watch HTTP requests and I see the initial request (and XML response) when the page loads which then of course loads the root as collapsed. However when I click the root node to expand and expose its children, no request is made to the server for the child info. What am I doing wrong? – Bushcraft

Also, after reading your response again I think maybe I have miscommunicated something. I am hoping for the following behavior. The root nodes all load upon the first request. When a node is expanded an additional request is made to retrieve the child nodes for the node that was just expanded. This is necessary because the dataset is rather large and there is no need to return a giant XML file for every node if it can be done when each node is expanded. This is what I thought the "auto loading" functionality was for? – Bushcraft

@cra: Only now you described that you need to provide the list of child notes dynamically on the node expanding. That means, that you should not add "loaded" property to the "Child 1" node of course. Instead of that you should fix your server code so that it analyse nodeid, parentid and n_level input parameters and response with the correct data which contain only the nodes which are children of the nodeid node. – Conflagration

@cra: I am glad to hear this! Good Luck! – Conflagration