Dynamically change the color of TreeView node's caption

Develop and Deploy Cross-Browser Web Apps .

Dynamically change the color of TreeView node's caption

Postby joedarock » Mon Feb 15, 2016 9:10 pm

Assuming an existing TreeView, how do you dynamically change the color of a specific node's caption text? Please provide an example assuming the Treeview instance is "tv" and the node's id is "n1".

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

Re: Dynamically change the color of TreeView node's caption

Postby support » Tue Feb 16, 2016 4:11 am

   
Class('App', 'xui.Com',{
Instance:{
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_htmlbutton904")
.setLeft(310)
.setTop(280)
.setWidth(120)
.setHeight(40)
.setHtml("Modify Appearance")
.onClick("_ctl_htmlbutton904_onclick")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
_ctl_htmlbutton904_onclick:function (profile, e, value){
var ns = this;
ns.tv.updateItem("node2",{
itemStyle:"font-weight:bold;color:#00ff00;",
itemClass:"yourCSSClass"
});
}
}
});
   
support
 
Posts: 352
Joined: Sat Apr 27, 2013 9:22 am

Re: Dynamically change the color of TreeView node's caption

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

I have this working like this:

var tv = xui.UI.TreeView.getFromDom(siteTree); //declares new instance of TreeView named "tv" (domid aliased to "siteTree)

for (var j=1;j<7; j++){ //inserts 7 branches in tree and gives them id's, captions and images
tv.insertItems([{
id : "string" + j,
caption : ("String " + j),
image : "{/}img/icon1.png"
}]);

}

tv.updateItem("string1",{itemStyle:"font-weight:bold;background-color:red;color:black;"}); //updates the branch with id = "string1" to have bold font, black text and red background
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