TreeView List Search functionality

[Ronn]

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? 

[Simon]

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.

[Andrea]

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