CODEWITHSUNDEEP
jqgrid
woggles
woggles

Reputation: 7444

JQGrid treegrid not expanding as expected

I can't quite get my JQGrid treegrid to expand correctly. Its is a hierarchical adjacency grid.

When I expand the root node, the subnodes expand and indent correctly but they arent placed directly under the node.

Is there something wrong with my json data? Id like to have nodes that are expandable appear first and leaf nodes appear below them.

Example is here: http://jsfiddle.net/yNw3C/3194/ (I've renamed all nodes bob, but the weird expanding behaviour can still be seen)

$(function () {

    var mydata = [{"id":"5a1a9743-3e0f-11d3-941f-006008032006","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"9042ded8-09ee-46f9-beac-8746ed1cdd17","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"29846baa-ede0-4582-b9ed-39bcc486f2c2","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":false,"expanded":false,"loaded":true},{"id":"39cc2783-811f-4885-9af6-d35b1a1385a2","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"3061ce07-bff6-4d9a-a84a-a8a7d47ebd7a","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"d1f870ed-bca6-4cc8-8b96-b19fa251c2f8","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"5a1a9742-3e0f-11d3-941f-006008032006","name":"bob","level":0,"parent":null,"isLeaf":false,"expanded":false,"loaded":true},{"id":"c80ca2d1-8210-4c11-8c6d-005c97fce9cb","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"d9dadce8-a9ce-4343-a8a0-b80844aa36ad","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"b3bc918c-4fa6-4470-afdd-d98e3586d434","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":false,"expanded":false,"loaded":true},{"id":"466d78df-6f39-43ff-abfd-58e7bf91f8c8","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true},{"id":"be4c23b9-41a2-482f-a37a-33379ea03344","name":"bob","level":1,"parent":"5a1a9742-3e0f-11d3-941f-006008032006","isLeaf":true,"expanded":false,"loaded":true}];                


    $("#treegrid").jqGrid({
    datatype: "jsonstring",
        datastr: mydata,
    colNames: ["id", "partners"],
    colModel: [
                { name: 'id', index: 'id', hidden: true, key: true },
                { name: 'name', index: 'name', width: 500, sortable: false, classes: 'pointer' },                       
    ],
    height: 'auto',
    gridview: true,
    rowNum: 10000,
    sortname: 'name',
    treeGrid: true,
    treeGridModel: 'adjacency',           
    ExpandColumn: 'name',
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
});        

});

Upvotes: 1

Views: 2413

Answers (2)

Oleg
Oleg

Reputation: 221997

It's just small misunderstanding how jqGrid builds TreeGrid. You have to provide sorted data as the input. jqGrid just place all the rows in exact the order like one have in input to the grid. The collapsed rows will be just hidden. If the user expand the node jqGrid shows all rows which have the expanding node as the parent.

So to fix the problem you have to resort the input data so that all direct children should follow the parent. Probably you need additionally include first nodes which are not leafs (having isLeaf: false) and then the children which are leafs (having isLeaf: true). Additionally you should sort all nodes by sortname option (by "name" column in your case).

By the way you can remove id column from colModel. jqGrid uses id property of input data by default as input for rowid (the value of id attribute of <tr> elements of the grid).

See update demo http://jsfiddle.net/yNw3C/3204/

Upvotes: 3

kmas
kmas

Reputation: 6439

Currently jqGrid can work only with data returned from server.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3atreegrid#options

Create a simple web page that returns your JSON.

Upvotes: 0

Related Questions