Develop Once, Deploy Anywhere!

[joedarock]

My application has a background process that has to update data inside TreeView nodes that are presently unfolded (expanded). How can I determine which nodes are unfolded?

Joe

[support]

"getUIValue" will return those selected ids .

[joedarock]

I don't understand how to use this. Can you provide an example to get caption or some other item property of a specified tree node ?

[support]

   

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("multibycheckbox")
                .setValue("")
                );
            
            append(
                (new xui.UI.HTMLButton())
                .setHost(host,"ctl_htmlbutton904")
                .setLeft(170)
                .setTop(260)
                .setWidth(420)
                .setHeight(30)
                .setHtml("Get selection nodes")
                .onClick("_ctl_htmlbutton904_onclick")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        _ctl_htmlbutton904_onclick:function (profile, e, value){
            var ns = this,
                selected = ns.tv.getUIValue(true);
            
           alert(selected);
            
            if(selected && selected.length){
                var item = ns.tv.getItemByItemId(selected[0]);
                alert(item.caption);
            }
        }
    }
});

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("multibycheckbox")
                .setValue("")
                );
            
            append(
                (new xui.UI.HTMLButton())
                .setHost(host,"ctl_htmlbutton904")
                .setLeft(170)
                .setTop(260)
                .setWidth(420)
                .setHeight(30)
                .setHtml("Get selection nodes")
                .onClick("_ctl_htmlbutton904_onclick")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        _ctl_htmlbutton904_onclick:function (profile, e, value){
            var ns = this,
                selected = ns.tv.getUIValue(true);
            
           alert(selected);
            
            if(selected && selected.length){
                var item = ns.tv.getItemByItemId(selected[0]);
                alert(item.caption);
            }
        }
    }
});

   

[joedarock]

This doesn't work. It gives an error code "Uncaught TypeError: Cannot read property 'getUIValue' of undefined".

Here is how I wrote the code. Except for using button 6 and my instantiation of the 'tv' variable, I think it's exactly what you provided (I'm sure the 'tv' declaration is correct, as it's used in multiple locations in my program):

_ctl_htmlbutton6_onclick:function (profile, e, value){
//var ns = this; //uictrl = profile.boxing();
var tv = xui.UI.TreeView.getFromDom(siteTree); //as in other places in my program
var ns = this,
selected = ns.tv.getUIValue(true);

alert(selected);

if(selected && selected.length){
var item = ns.tv.getItemByItemId(selected[0]);
alert(item.caption);
alert(item.caption);
}

The execution never gets to the first 'alert' call.

[support]

You've got the 'tv' object via "getFromDom" already, why used "ns" scope?

Maybe, your code should be

javascript code

_ctl_htmlbutton6_onclick:function (profile, e, value){
    var tv = xui.UI.TreeView.getFromDom(siteTree); //as in other places in my program
    var selected = tv.getUIValue(true);

    alert(selected);

    if(selected && selected.length){
        var item = tv.getItemByItemId(selected[0]);
        alert(item.caption);
        alert(item.caption);
    }
}

[joedarock]

What I originally wanted to do is figure out which nodes are expanded. How can I do that? Is that one of the items in the Items collection? Where can I get documentation on all the available data objects for the TreeView?

BTW, the last example you gave does weird things. The second alert will only display if the first alert is allowed to execute. If you comment out the first alert, the second one doesn't execute, instead giving the error code I referenced in a previous. This might have something to do with other background processes that are constantly updating the tree, since methods like toggleNode don't always execute while my whole program is running, even though the code lines immediately before and after do execute. FYI, my code isn't triggered by a Button-click event as in your example, it's triggered by a TreeView-click event. I do it this way because, when I click on a TreeView node, I need to know which other nodes are also open.

[support]

You can use "_checked" to determine it:

if(item._checked){
// expand
}else{
// fold
}

[joedarock]

This still doesn't work because 'selected' (previous example) is returning a null value in the alert.

[support]

Please use mouse CLICK to select some Items first.