find node by value?

[David Carnley]

Maybe I just need some sleep, but how can I find a node given a value?  And then set that node as the selected node (actually I think I got that part)...

thanks!
-D

[OfficeHeart]

I have the same question: how can I select a node (clientside) based on the value of that node?

Thanks in advance! 

[Dimo]

Hello,

Finding a tree node by its value (its content actually) is not hard, but you should keep in mind that it is not a fast operation. Here is a simple example, which shows how to disable an item with a specified value. Note that if there are several items with the same value, the first one will be taken. If you remove the break statement, all items will be manipulated.

function FindItemByValue(v) {
    var treeView = $("#TreeView").data("tTreeView");
    var items = $("#TreeView li.t-item");
    for (var j = 0; j < items.length; j++) {
        if ($("> div > span.t-in", items[j]).html() == v) {
            treeView.disable(items[j]);
            break;
        }
    }
}

All the best,
Dimo
the Telerik team

[OfficeHeart]

Thank you for the provided solution.

After finding the node, how can I select that node?

Thanks!

[Dimo]

Hello Martin,

The TreeView selection is only a visual indicator, so you can select an item by simply applying the t-state-selected CSS class to the correct DOM element, which is the span.t-in inside the item's <li>:

Javascript

var treeView = $("#TreeView").data("tTreeView");
$("#TreeView span.t-in").removeClass("t-state-selected");
var item; // assign a DOM element to this variable
$("> div > span.t-in", item).addClass("t-state-selected");

Best wishes,
Dimo
the Telerik team

[Shane Milton]

We've packaged up these functions (implemented slightly differently) in some js functions. These can probably be cleaned up, but hope this helps somebody:

findNodeById: function ($treeViewElement, id) {
     var itemsToLookThrough = $treeViewElement.find("li > div > span.t-in").siblings('input.t-input');
     for (var j = 0; j < itemsToLookThrough.length; j++) {
         if (itemsToLookThrough[j].value == id) {
             return $(itemsToLookThrough[j].parentElement.parentElement);
         }
     }

     return null;
 }
     ,
 selectNode: function ($treeViewElement, $node) {
     $treeViewElement.removeClass("t-state-selected");
     $node.find("> div > span.t-in").addClass("t-state-selected");
 }

[Ravi]

Hi, I am using MVC 3 and this example of yours to create a treeview.

http://demos.telerik.com/aspnet-mvc/treeview .

Now, in a button event I want to find all the nodes in this tree by a particular attribute and select(highlight) them and expand the parent node for that node. Can you please help me out on how to do this ? I am doing a POC on telerik/MVC for my company and plan on upgrading from the trial version.

Thanks
RSMS