jQuery Grid Plugin – jqGrid

OK, I realized I made a mistake – one cannot use setTreeRow before doing addRowData. However, when I do add data with addRowData I don't get a tree structure but a flat table. Anyone know why?

Thanks,

Ido

This is working correctly for me. I am using a tree grid and populating it with data on the client side. I'm using the adjacency model. Which part is not working for you?

Would you mind sharing your code? It could really help me out.

Here, I made you a demo:

$(document).ready(function() {
    TreeDemo.setupGrid($("#tree"));
});

TreeDemo = {
    data: { A: ["A1", "A2"], B: ["B1", "B2"] },
    setupGrid: function(grid) {
        grid.jqGrid({
            colNames: ['Name'],
            colModel: [
                  { name: 'Name', index: 'Name', width: "250em" }
                ],
            datatype: TreeDemo.treeData,
            loadui: "none",
            sortname: 'Number',
            treeGrid: true,
            treeGridModel: "adjacency",
            sortorder: "asc"
        })
    },
    treeData: function(postdata) {
        var items = postdata.nodeid ? TreeDemo.data[postdata.nodeid] : TreeDemo.data;
        var i = 0;
        var rows = new Array();
        for (val in items) {
            var isLeaf = postdata.nodeid != undefined;
            rows[i] = {
                Name: val,
                Id: val,
                level: postdata.nodeid ? 1 : 0,
                parent: postdata.nodeid || null,
                isLeaf: isLeaf ? "true" : "false",
                expanded: "false"
            }
            i++;
        }
        $("#tree")[0].addJSONData({
            Total: 1,
            Page: 1,
            Records: 2,
            Rows: rows
        });
    }
};

Please feel free to add this to the tree documentation.

Hi,

I've used the same Craig solution and all work fine.

I have only a problem: if I open the node the tree grid add correclty the new rows but when I colse it they don't disappare.

When I  open the node again it's load again the row and duplicate them.

Here a piece of my code:

jQuery('#amm_organizations_grid').jqGrid({
treeGrid: true, 
height:'auto',
treedatatype: 'json',
treeModel : 'adjacency',
ExpandColClick : false,
datatype: function(postdata) {
var gridJson=jsonToTree(postdata,ecx_global['JsonOrganizzazioni']);
var thegrid = jQuery("#amm_organizations_grid")[0];
thegrid.addJSONData(gridJson);
},
colNames: ['Organizzazione','Utenti'],
colModel: [
{name:'code', index:'code', width:200, sortable:false}, 
{name:'usersNumber', index:'usersNumber', width:70, sortable:false}],
jsonReader:  {
root: "rows",
id: "id",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
pager: jQuery('#amm_organizations_grid_pager'),
viewrecords: true,
imgpath: '/ECXMSResources/jquery-plugins/jqGrid/themes/steel/images'
});

Json returned from jsonToTree the first time:

{"total":1,"page":1,"rows":[
{"code":"root","id":"1","usersNumber":"","level":0,
"parent":"NULL","isLeaf":"false","expanded":"false"}],
"records":1}

Json returned from jsonToTree the opening the first node (id=1):

{"total":1,"page":1,"rows":[
{"code":"org_1.0.0","id":"333","usersNumber":"","level":1,
"parent":"1","isLeaf":"false","expanded":"false"}, {"code":"org_1.1.1","id":"334","usersNumber":"","level":1,
"parent":"1","isLeaf":"false","expanded":"false"}
],"records":2}

Some Ideas?

SOLVED:

I've used treeModel to set the adjacency mode (as wrote in Treegrids decumentation).

Using treeGridModel instead all work fine.