how to search for a text in the treeView using the search box

5 posts, 0 answers
  1. Sudha
    Sudha avatar
    27 posts
    Member since:
    May 2011

    Posted 28 Jun 2013 Link to this post


    We have a treeView which has multiple levels. Hence to make it easy for the users , we have put a search box to search for a particular text in the TreeView.

    How do we find the text in the tree view? Otherwise,  how to bind the data in the tree to the search box and highlight the matching texts.

  2. Plamen
    Plamen avatar
    2723 posts

    Posted 02 Jul 2013 Link to this post

    Hi Sudha,

    One possible suggestion to achieve such scenario is to use RadDropDownTree as in this demo where similar functionality is implemented.

    You can also review this Code Library where similar filtering scenario is implemented with RadTreeView.

    Hope this will be helpful.

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. DevCraft R3 2016 release webinar banner
  4. Sudha
    Sudha avatar
    27 posts
    Member since:
    May 2011

    Posted 12 Jul 2013 Link to this post

    the code provide helped us a lot.
    I want one more functionality in this search. I want the search functionality (as provided in Code Library link) to work on click of a button (now it is currently on key press). I want the search to happen in client side only (as it is now) but on click of a button. Along with this , is it also possible to have the first text matching node to be highlighted ?
    We need this asap. Please help.

  5. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 15 Jul 2013 Link to this post

    Hi Sudha,

    Please try the below implementation(with out using search box control)

    Aspx page:

    <telerik:RadTextBox ID="RadTextBox1" runat="server"/>
           <telerik:RadButton ID="RadButton1" runat="server" Text="Search" OnClientClicking="valueChanging">
           <telerik:RadTreeView ID="RadTreeView1" runat="server">

    Javascript functions:
    function valueChanging(sender, args) {
              var tree = $find("<%= RadTreeView1.ClientID %>");
              var textbox = document.getElementById("<%= RadTextBox1.ClientID %>");
              var searchString = textbox.value;
                  for (var i = 0; i < tree.get_nodes().get_count(); i++) {
                      findNodes(tree.get_nodes().getNode(i), searchString);
    //Cancelling the Post back of RadButton
          function findNodes(node, searchString) {
              var hasFoundChildren = false;
              for (var i = 0; i < node.get_nodes().get_count(); i++) {
                  hasFoundChildren = findNodes(node.get_nodes().getNode(i), searchString) || hasFoundChildren;
              //Higlighting the Searched node
              if (node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1 && searchString.toLowerCase() !=  "") {
              else {
              if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                  return true;
              else {
                  return false;

  6. Shree
    Shree avatar
    4 posts
    Member since:
    Aug 2014

    Posted 23 May in reply to A2H Link to this post

    Hello, This works perfectly fine. But, i have a tree with 700 nodes approx. In this case, initial search is taking 7 sec and consequent searches works with in milliseconds.

    Is there any way to make the initial search also better?

Back to Top
DevCraft R3 2016 release webinar banner