Mixing
jqGrid treegrid, Expand Node Programmatically
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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);
});
});
jqgrid
edited Jan 3 at 6:06
Cœur
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
add a comment |
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);
});
});
jqgrid
edited Jan 3 at 6:06
Cœur
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
1
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59
add a comment |
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);
});
});
jqgrid
edited Jan 3 at 6:06
Cœur
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
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);
});
});
jqgrid
jqgrid
edited Jan 3 at 6:06
Cœur
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
edited Jan 3 at 6:06
Cœur
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
edited Jan 3 at 6:06
Cœur
19.3k10116155
edited Jan 3 at 6:06
Cœur
19.3k10116155
edited Jan 3 at 6:06
Cœur
19.3k10116155
19.3k10116155
asked Sep 30 '11 at 16:47
GregTGregT
72421224
asked Sep 30 '11 at 16:47
GregTGregT
72421224
asked Sep 30 '11 at 16:47
GregTGregT
72421224
72421224
1
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59
add a comment |
1
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59
1
1
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59
add a comment |
1 Answer
1
active
oldest
votes
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
edited Sep 25 '12 at 9:57
j0k
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7613527%2fjqgrid-treegrid-expand-node-programmatically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
edited Sep 25 '12 at 9:57
j0k
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
add a comment |
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
edited Sep 25 '12 at 9:57
j0k
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
add a comment |
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
edited Sep 25 '12 at 9:57
j0k
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
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
edited Sep 25 '12 at 9:57
j0k
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
edited Sep 25 '12 at 9:57
j0k
20.4k136876
edited Sep 25 '12 at 9:57
j0k
20.4k136876
edited Sep 25 '12 at 9:57
j0k
20.4k136876
20.4k136876
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
answered Sep 11 '12 at 16:47
ZeroKZeroK
36037
36037
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7613527%2fjqgrid-treegrid-expand-node-programmatically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Aha! I think the answer is that instead of 'getRowData', you have to use 'getLocalRow'. Go figure!
– GregT
Sep 30 '11 at 16:59