[Solved] Client-side selection of TreeViewItem

[Randy Leonard]

There must be a way to do this, but I seem to be missing it...

• Find a specific node in a TreeView, as identified by it's value
• Programmatically select that node in the tree using client-side API'

Kudo's to anyone providing source code snippet for performing either of the above two tasks.

Thanks,
Randy

[Randy Leonard]

It seems the RadTreeView control makes this quite simple:

function FindNode() {    var tree= $find("<%= RadTreeView1.ClientID %>");    var node = tree.findNodeByText("Child RadTreeNode 1");    //... or ...    var node1 = tree.findNodeByValue("3");    //... or ...    var node2 = tree.findNodeByAttribute("MyCustomAttribute", "Some Value");    node.get_parent().expand();    node.select(); }

Must be a way to do same thing with TreeView Extensions for MVC?

Thanks,
Randy

[al]

Hi mate here is a workaround. If you inspect the element you`ll see that when an item is selected the span in which the name is written has a class added to it, so all you need to do is find the node:
 function onDataBinding(e) {
            var treeview = $('#TreeView').data('tTreeView');
            var jsonObject;
            if (e.item == treeview.element) {
                jsonObject =  <%= Model.type%>;
                treeview.bindTo(jsonObject);
                 var item = $("> ul > li > div > span.t-in", treeview.element)['0'];
                $(item).addClass("t-state-selected");
            } 
        }

for my case, i wanted to select the first item. Let me know if its what you wanted.

[Randy Leonard]

Apologies for delayed response... just getting back to this project.

Your code snippet works perfectly, thanks. 
   - My remaining issue to locate desired node within the tree.  
   - Each node has a distinct itemValue.

So my (last?) question is how to ask the treeView for a node with a given itemValue.

Thanks,
Randy

[Alex Gyoshev]

Hey Randy,

Finding a node by its value (let's say, 5) is as follows:
var item = $("#TreeView").find(".t-input[name='itemValue'][value='5']").closest("li");

As described in the following thread.

Greetings,
Alex Gyoshev
the Telerik team

[Randy Leonard]

Alex:

This seems to work w.r.t. finding an item within the tree, but the item cannot be used for selecting a node within a tree.  For example, the following always selects the first node in the tree:

      var item = $("> ul > li > div > span.t-in", treeview.element)['0'];
       $(item).addClass("t-state-selected");

But the following gives some weird selection behavior within the tree (assuming node with item value of 5 exists):

      var item = $("#TreeView").find(".t-input[name='itemValue'][value='5']").closest("li");
      $(item).addClass("t-state-selected");

Using firebug, I found the first example returns an item of type span.t-in, whereas the second example returns an item of type li.t-item.

As such, calling $(item).addClass("t-state-selected"); with the different types of item objects gives different behavior.

So I am showing some ignorance on how to find content within the treeView... some additional assistance would be appreciated.

Thanks,
Randy

[Dimo]

Hey Randy,

The t-state-selected class should be applied to the span.t-in. If you have the li.t-item element, then you can reach the span like this:

item.find(">div>.t-in").addClass("t-state-selected");

Greetings,
Dimo
the Telerik team