jqGrid treegrid, Expand Node Programmatically - jqgrid

Question

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:"Cash 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);
});
});

Answer 1

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