Telerik MVC : Working with TreeView Nodes Using the Extended Client API

This website is no longer actively supported

Written by John DeVight on 29 Dec 2011 21:17

Overview

A Telerik forum post caught my attention about the Telerik TreeView not having findNodeByText and findNodeByValue functions like the Telerik ASP.NET AJAX RadTreeVirew control. I decided to create the functions to return a node object with several functions to navigate and manipulate TreeView nodes and addd it to my Telerik MVC Controls : Extended Client API.

Find Node Functions

The find node functions were easy enough to do. The tree node contains an element (span or anchor) with a css class of t-in. This element has the text for the node. The value is stored in a hidden input element with a css class of t-input and a name of itemValue. The find node functions return a node object with several functions that can be used to manipulate the node. The node object contains an element attribute that is the element with the t-in css class.

Note: in the source code you will find the use of $(this.element). This is the same as: $('#NameOfTreeView').data('tTreeView').element.

Here are the functions:

findNodeByText

Syntax:

var node = findNodeByText("Node One");

Source Code:

findNodeByText: function (text) {
    var element = $(this.element).find('.t-in:contains("' + text + '")');
    if (element.length > 0) {
        return this.createNode(this, element);
    } else {
        return [];
    }
}

findNodeByValue

Syntax:

var node = findNodeByValue("Node Value One");

Source Code:

findNodeByValue: function (value) {
    var element = $(this.element).find('input.t-input[name="itemValue"][value="' + value + '"]').prev();
    if (element.length > 0) {
        return this.createNode(this, element);
    } else {
        return [];
    }
}

findNodeContainsValue

The findNodeContainsValue uses the jQuery attribute contains selector to find the element value that contains the text that is passed in.

Syntax:

var node = findNodeContainsValue("One");

Source Code:

findNodeContainsValue: function (value) {
    var element = $(this.element).find('input.t-input[name="itemValue"][value*="' + value + '"]').prev();
    if (element.length > 0) {
        return this.createNode(this, element);
    } else {
        return null;
    }
}

Discussion Closed

juan (guest) 06 Mar 2012 19:33

Hi. do you show a complete example about this, because I try of to use it, but I get a error when the function findNodeByText is called.
Thanks you.

---