Programatically insert sub-nodes in TreeView

Develop and Deploy Cross-Browser Web Apps .

Programatically insert sub-nodes in TreeView

Postby joedarock » Wed Feb 10, 2016 12:38 pm

I have a TreeView; let's call it tv: tv = new xui.UI.TreeView

I can add nodes to it with : tv.insertItems([{id : "node", caption : ("String ") }])
I can modify nodes with tv.updateItems([{id : "node", caption : ("String") }])

How do I programatically insert or update a sub-node to an already defined node? How to programatically fold/unfold a node or sub-node?

Also,
Is there a maximum font size for the TreeView? Can the tree's physical size be expanded to handle larger icon images/fonts?

Joe
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: Programatically insert sub-nodes in TreeView

Postby joedarock » Thu Feb 11, 2016 10:09 am

Anyone?
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm

Re: Programatically insert sub-nodes in TreeView

Postby support » Mon Feb 15, 2016 2:40 am

   
Class('App', 'xui.Com',{
Instance:{
autoDestroy : true,
properties : {},
initialize : function(){
},
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
(new xui.UI.Panel())
.setHost(host,"ctl_panel3")
.setDock("none")
.setLeft(170)
.setTop(20)
.setWidth(420)
.setHeight(230)
.setZIndex(1)
.setCaption("TreeView")
);

host.ctl_panel3.append(
(new xui.UI.TreeView())
.setHost(host,"tv")
.setItems([{
"id" : "node1",
"sub" : ["node11",{
"id" : "node12",
"image" : "http://www.crossui.com/RAD/img/demo.png"
},"node13","node14"],
"caption" : "node1"
},{
"id" : "node2",
"sub" : ["node21","node22","node23","node24"],
"caption" : "node2"
}])
.setSelMode("none")
.setValue("a")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton1")
.setLeft(170)
.setTop(300)
.setWidth(120)
.setHeight(40)
.setHtml("Insert Nodes [head]")
.onClick("_ctl_htmlbutton1_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton2")
.setLeft(310)
.setTop(300)
.setWidth(120)
.setHeight(40)
.setHtml("Insert Nodes [tai]")
.onClick("_ctl_htmlbutton2_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton3")
.setLeft(450)
.setTop(300)
.setWidth(120)
.setHeight(40)
.setHtml("Insert Nodes [middle]")
.onClick("_ctl_htmlbutton3_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton4")
.setLeft(170)
.setTop(270)
.setWidth(120)
.setHeight(22)
.setHtml("open Node")
.onClick("_ctl_htmlbutton4_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton5")
.setLeft(310)
.setTop(270)
.setWidth(120)
.setHeight(22)
.setHtml("close Node")
.onClick("_ctl_htmlbutton5_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton7")
.setLeft(450)
.setTop(270)
.setWidth(120)
.setHeight(22)
.setHtml("Update Caption")
.onClick("_ctl_htmlbutton7_onclick")
);

append(
(new xui.UI.HTMLButton())
.setHost(host,"ctl_htmlbutton904")
.setLeft(170)
.setTop(360)
.setWidth(120)
.setHeight(40)
.setHtml("Insert Nodes [sub]")
.onClick("_ctl_htmlbutton904_onclick")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
_ctl_htmlbutton4_onclick:function (profile, e, value){
var ns = this;
ns.tv.toggleNode("node1",true);
},
_ctl_htmlbutton5_onclick:function (profile, e, value){
var ns = this;
ns.tv.toggleNode("node1",false);
},
_ctl_htmlbutton7_onclick:function (profile, e, value){
var ns = this;
ns.tv.updateItem("node1",{caption:"new caption"});
},
_ctl_htmlbutton1_onclick:function (profile, e, value){
var ns = this;
ns.tv.insertItems([{id:"node3",caption:"node 3[head]",sub:[]}],null,null,true);
},
_ctl_htmlbutton2_onclick:function (profile, e, value){
var ns = this;
ns.tv.insertItems([{id:"node4",caption:"node 4[tail]"}]);
},
_ctl_htmlbutton3_onclick:function (profile, e, value){
var ns = this;
ns.tv.insertItems([{id:"node4",caption:"node 4[middle]"}],null,"node1",true);
},
_ctl_htmlbutton904_onclick:function (profile, e, value){
var ns = this;
ns.tv.toggleNode("node3",true);
ns.tv.insertItems([{id:"node31",caption:"node 31 [sub]"}],"node3");
}
}
});
   



And, if you want to use bigger icon, you have to customlize the css setting of the treeview.
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: Programatically insert sub-nodes in TreeView

Postby joedarock » Thu Feb 18, 2016 6:37 pm

I have this working. Assuming an existing TreeView with a branch of id "string1":

for (i=1;i <pJars[String][0]+1; i++){ //creates a variable # of sub-strings
tv.insertItems([{id:"str" + String + "bat"+i, caption:"Battery "+i}],"string1",null,false); //creates a variable # of sub-strings under "string1" with numbered id's and captions
}
joedarock
 
Posts: 161
Joined: Thu Nov 19, 2015 8:39 pm


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron