How to set TreeView node styles?

[Bruce_Dickey]

Hi,

1. How can I set a TreeView item's styles after creation -- background and text colors, caption, font-weight?

    I want different items to have different background and text colors.

    I have tried the following idea which does not work:

        var x = ctl_my_treeview.getSubNodeByItemId('ITEM', 'myId')
        x.css('tree', '');

2. How can I change the TreeView item's selected background color for an individual item upon selection?

    Of all the items that have different background and text colors, I want the selected item's background color  to be a brighter shade of that custom background color.

Thanks,
Bruce

[linb]

You can learn those appearance functions in the Example's "Appearances" block.

[Bruce_Dickey]

OK, I see those, but they are not quite what I am trying to do.

The differences are: 1) I want to change styles post-creation, for example upon some event, and 2) I want to change styles for a subset of the sub-items -- not for all of them.

I think if you show example code that colors the background color of each sub-node to a different color in an event handler of a two-level TreeView, that that would get me going so that I could apply the technique to other styles and controls.

Thank you very much!
Bruce

[Bruce_Dickey]

I found a way -- don't know if it's the best way.

To set styles on nodes of a TreeView control, in a handler you can do, e.g.:
// Second arg is the item id var n = this.ctl_treeview.getSubNodeByItemId('ITEMCAPTION', 'pm_vcc_enable');    n.html("<span style='color:Green; font-weight:bold; font-size:14px; background-color:Beige'>" +       "\u2714&nbsp</span><span style='padding-bottom:3px; background-color:LightGreen'>" +       "&nbsp Vcc Enable &nbsp</span>")

I found that I could also call `addClass()`, but I wanted to change the caption at the same time, so the above works. My first attempt was to call `css()`, which did not achieve the result I wanted.

[linb]

You can set html in "caption":

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.TreeView)
                .setHost(host,"ctl_treeview1")
                .setItems([{"id":"node1", "caption":"<span style='color:Green; font-weight:bold; font-size:14px; background-color:Beige'>✔&nbsp</span><span style='padding-bottom:3px; background-color:LightGreen'>&nbsp Vcc Enable &nbsp</span>"}, {"id":"node2", "itemStyle":"color:red;", "caption":"Use itemStyle"}])
                .setDock("none")
                .setLeft(250)
                .setTop(30)
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        }
    }
});

[Bruce_Dickey]

Thank you for pointing that out to me. I was also able to use updateItem() to affect a single node instead of the entire tree.

[postbreak]

Thank you guys. I'm searching this on the net. and this is the best guide so far.