This is a migrated thread and some comments may be shown as answers.

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

4 Answers 414 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
Sudha
Top achievements
Rank 1
Sudha asked on 28 Jun 2013, 08:34 AM
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.

4 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 02 Jul 2013, 12:35 PM
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
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.
0
Sudha
Top achievements
Rank 1
answered on 12 Jul 2013, 12:04 PM
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.
0
A2H
Top achievements
Rank 1
answered on 15 Jul 2013, 10:21 PM

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
0
Shree
Top achievements
Rank 1
answered on 23 May 2016, 10:44 AM

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?

Tags
SearchBox
Asked by
Sudha
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Sudha
Top achievements
Rank 1
A2H
Top achievements
Rank 1
Shree
Top achievements
Rank 1
Share this question
or