deva said:

I have been trying to show the records in the treeview format using jqgrid. I have used the above as sample code and did exercises. Empty page is loading in the browser.  Can any one give me proper sample code to view the records in the treeview format. Thanks in advance..

Kindly give me the way to do that. let say I am having root as  [  0,  1,  4 ]
     Child indexes are
                0=>[  1,  4,  7,  8,  9 ]
                1=>[  2,  3 ]
                4=>[  5,  6 ]

                Child index records should come under the root records. like

                0
                +-----1
                        +--2
                        +--3
                +---4
                        +--5
                        +--6
                +---7
                +---8
                +---9

Thanks..

The TreeGrid in jqGrid 3.8.2, treeReader.expanded_field does not work.

After collapsing field, expanding the field does not work. This case is caused by loading custom data (i.e. JSON-RPC response).

And I have modified and created patch.

I'm a newbie for jQuery, if there is other avoidance, please advice me. ... using without expanded_field property is most simple way :).

Sample code is below.

    $("#treegrid").jqGrid({
            url: 'media/rpc_treedata.txt',
            datatype: 'json',
            mtype: 'POST',
            colNames: ["ID", "Description", "Total"],
            colModel: [
                {name:'id', index:'id', width:1, hidden:true, key:true},
                {name:'desc', index:'desc', hidden:false, sortable:true},
                {name:'num', index:'num', hidden:false, sortable:true}
            ],
            treeGridModel: 'adjacency',
            height: 'auto',
            width: '500',
            pager: "#ptreegrid",
            treeGrid: true,
            ExpandColumn: 'desc',
            ExpandColClick: true,
            caption: "Tree Grid Example",
            tree_root_level: 0,
            jsonReader: {
                repeatitems: false,
                id: "id",
                root: function(obj) { return obj["result"]["records"]; },
                page: function(obj) { return 1; },
                total: function(obj) { return 1; },
                records: function(obj) { return obj["result"]["records"].length; }
            },
            treeReader: {
                level_field:        "lv",
                parent_id_field:    "pt",
                leaf_field:            "lf",
                expanded_field:        "ex"
            }
        });

Data,

{
    "jsonrpc": "2.0",
    "result": {
        "records": [
            {"id":101, "desc":"Super Item", "num":300, "lv":0, "pt":null, "lf":false, "ex":false},
            {"id":102, "desc":"Item 1"    , "num":100, "lv":1, "pt":101 , "lf":false, "ex":false},
            {"id":103, "desc":"Sub Item 1", "num":50 , "lv":2, "pt":102 , "lf":true , "ex":true},
            {"id":104, "desc":"Sub Item 2", "num":25 , "lv":2, "pt":102 , "lf":false, "ex":false},
            {"id":105, "desc":"Sub-sub 1" , "num":25 , "lv":3, "pt":104 , "lf":false, "ex":false},
            {"id":106, "desc":"Sub Item 3", "num":25 , "lv":2, "pt":102 , "lf":true , "ex":true}
        ]
    }
}

This is caused by inappropriate attribute name of object. The fix patch is below.

--- grid.treegrid.js.orig       2010-12-23 09:10:43.000000000 +0900
+++ grid.treegrid.js    2010-12-23 09:11:22.000000000 +0900
@@ -412,8 +412,9 @@
        collapseNode : function(rc) {
                return this.each(function(){
                        if(!this.grid || !this.p.treeGrid) { return; }
-                       if(rc.expanded) {
-                               rc.expanded = false;
+                       var expanded = this.p.treeReader.expanded_field;
+                       if(rc[expanded]) {
+                               rc[expanded] = false;
                                var id = $.jgrid.getAccessor(rc,this.p.localReader.id);
                                var rc1 = $("#"+id,this.grid.bDiv)[0];
                                $("div.treeclick",rc1).removeClass(this.p.treeIcons.minus+" tree-minus").addClass(this.p.treeIcons.plus+" tree-plus");

Thanks.