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

[Sudha]

Hi,

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.

Thanks,
Sudha.

[Plamen]

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.

Regards,
Plamen
Telerik

[Sudha]

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.

Thanks,
Sudha.

[A2H]

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:RadButton>
       <telerik:RadTreeView ID="RadTreeView1" runat="server">
       </telerik:RadTreeView>

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
              args.set_cancel(true);


      }

 

      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() !=  "") {

              node.set_selected(true);

          }

          else {

              node.set_selected(false);

          }

 

          if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {

              node.set_visible(true);

              node.set_expanded(true);

              return true;

          }

          else {

              node.set_visible(false);

              return false;

          }

      }

Thanks,
A2H

[Shree]

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?