jqGrid treegrid, Expand Node Programmatically

I am experimenting with the jqGrid treegrid feature. Can anyone explain why the 'expandNode' method doesn't work in this example? (Testing under Chrome and JQ 1.4.2).

Note 1: I can't get any of the expand or collapse methods to do anything. They change the appearance of the icon, but the child rows don't disappear. If I click the icon manually, the appearance changes AND the child rows get hidden as expected.

Note 2: What's the difference between expand/collapse ROW and expand/collapse NODE?

Note 3: I found some entries on the jqGrid wiki about using setTimeOut, but I think that is relating to wanting to expand everything on initial load. I want to do it based on a click, as indicated here.

$(document).ready(function() {

    var table = $("<table id=treegrid></table>");

    $("body").append(table);

    grid = $("#treegrid");

    /* DIRECT COPY FROM SO http://stackoverflow.com/questions/6788727/jqgrid-tree-grid-with-local-data */
    var mydata = [
        { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
          level:"0", parent:"",  isLeaf:false, expanded:false, loaded:true },
        { id:"2", name:"Cas开发者_如何学Ch 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
          level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
        { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
          level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
        { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
          level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
        { id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
          level:"0", parent:"",  isLeaf:false, expanded:true, loaded:true },
        { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
          level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
        { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
          level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
        { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
          level:"0", parent:"",  isLeaf:true,  expanded:false, loaded:true }
        ],

    grid = $("#treegrid");

    grid.jqGrid({
        datatype: "jsonstring",
        datastr: mydata,
        colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
        colModel:[
            {name:'id', index:'id', width:1, hidden:true, key:true},
            {name:'name', index:'name', width:180},
            {name:'num', index:'acc_num', width:80, align:"center"},
            {name:'debit', index:'debit', width:80, align:"right"},
            {name:'credit', index:'credit', width:80,align:"right"},
            {name:'balance', index:'balance', width:80,align:"right"},
            {name:'enbl', index:'enbl', width: 60, align:'center',
             formatter:'checkbox', editoptions:{value:'1:0'},
             formatoptions:{disabled:false}}
        ],
        height: 'auto',
        gridview: true,
        rowNum: 10000,
        sortname: 'id',
        treeGrid: true,
        treeGridModel: 'adjacency',
        treedatatype: "local",
        ExpandColumn: 'name',
        caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        }
    });
    /* END DIRECT COPY */    

    var f = $("<button>ExpandCash</button>");

    $("body").append(f);

    // Test reloading and summarization changes
    f.bind("click",function() {
        var rec = $("#treegrid").getRowData("1");
        //console.log(JSON.stringify(rec));
        $("#treegrid").expandNode(rec);
        $("#treegrid").expandRow(rec);
    });

});

---

I was able to get it to expand by aiming for the root nodes (and then second headers; my grid was 3 levels deep) using this code:

function Expand() {
   var rows = $("#treeGrid").jqGrid('getRootNodes');
   for (var i = 0; i < rows.length; i++){
        var childRows = $("#treeGrid").jqGrid('getNodeChildren', rows[i]);
        $("#treeGrid").jqGrid('expandNode', rows[i]);    
        $("#treeGrid").jqGrid('expandRow', rows[i]);
        for (var j = 0; j < childRows.length; j++) {
            $("#treeGrid").jqGrid('expandNode', childRows[j]);    
            $("#treeGrid").jqGrid('expandRow', childRows[j]);
        }
    }
}

Placed inside a simple click function, this would expand all nodes. Data format shouldn't matter, but I used json data. Nested 'for' loops isn't always the best way to go, but I didn't see another solution that worked for me; it shouldn't be bad though unless you have a large number of nested nodes.

NOTE: this code is sensitive to the number of levels your treegrid has; you will need additional loops (or another method) for more than 3 levels (level 0 = root, level 1 = first header, level 2 = leaf), and won't need the inner loop for a 2 level tree