TreeView List Search functionality

3 posts, 0 answers
  1. Ronn
    Ronn avatar
    4 posts
    Member since:
    Jul 2008

    Posted 23 Jul 2008 Link to this post

    Does the RadTreeView control support search-as-you-type functionality?

    Is there any easy way to implement it with something like the ListSearchExtender from the AjaxControlToolkit? 
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 25 Jul 2008 Link to this post

    Hello Ronn,

    The only possible solution to this case would be to handle OnKeyPressing of the TreeView and keep track of the currently pressed key.

    Then use the findNodeByText function to find Nodes containing the typed text and select the first, or better highlight it.

    Finally, if Enter is pressed, select the Node.

    I hope this will get you started.

    All the best,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrea
    Andrea avatar
    64 posts
    Member since:
    Jan 2005

    Posted 13 Jan 2010 Link to this post

    Hi,

    I tried to implement Simon suggestion but not with findByText method, I used a modified version of this posted code :
            var strSearch = ""
             
            function treeSearch(event) { 
                if (event.charCode == 27 || event.keyCode == 27) 
                    strSearch = ""
                     
                else { 
                    var treeSp = $find('<%= RadComboBox1.Items(0).FindControl("RadTreeSpatial").ClientID %>'); 
                    if (event.charCode == null) { 
                        strSearch = strSearch + String.fromCharCode(event.keyCode); 
                    } 
                    else { 
                        strSearch = strSearch + String.fromCharCode(event.charCode); 
                    } 
                    search(treeSp.get_nodes().getNode(0).get_nodes().getNode(0), strSearch); 
                } 
            } 
            function search(node, txt) { 
                var i; 
                var str = node.get_text(); 
                if (str.match(txt) != null)  //Compare with the search term   
                { 
                    node.highlight(); 
                    return
                } 
                else { 
                    node.unhighlight(); 
                    if (node._hasChildren()) { 
                        for (i = 0; i < node._getChildren().get_count(); i++) { 
                            search(node._children._array[i], txt); 
                        } 
                    } 
                    else 
                        return
                } 
            }      

    TreeView nodes that match the search string are correctly highlighted but when I press "Enter" the execution not calls my js function instead the root node of the treeview is selected.

    Best Regards
Back to Top