Tree view matched node selection based on Keypress

[Sreenivas]

Hello Guys,

I have a Rad Tree controls and there are hundreds of nodes and sub nodes bound to it. 

Is there anyway from client side that i can select a node which start with "W"(For ex)  by pressing W key on my keyboard? And the tree should be scroll down automatically to selected node.

Thanks in Advance.

[Kate]

Hello Sreenivas,

Please refer to the following CodeLibrary where you can find a runnable project with the functionality that you need to achieve - TreeView Filtering.

Regards,
Kate
Telerik

[Sreenivas]

Thanks Kate.

With the help of the referred code i have done some extent. But i am unable to move to next matched node by pressing the same key.Below is my script. 

My requirement is,when i press "W"(for ex) it should navigate to first node starting with W and when i keep on pressing W it should move to next matched node.

function OnKeyPressing(sender, args) {

            var tree = $find("treeviewLeftPopUp");
            var SelectedNode_Tree = tree.get_selectedNodes()[0];

            if (SelectedNode_Tree.get_expanded()) {

                var character = null;
                var node = args.get_node();
                var nodes = SelectedNode_Tree.get_nodes();
                var key = args.get_domEvent().keyCode;
                switch (key) {
                    case 65: character = "A"; break;
                    case 66: character = "B"; break;
                    case 67: character = "C"; break;
                    case 68: character = "D"; break;
                    case 69: character = "E"; break;
                    case 70: character = "F"; break;
                    case 71: character = "G"; break;
                    case 72: character = "H"; break;
                    case 73: character = "I"; break;
                    case 74: character = "J"; break;
                    case 75: character = "K"; break;
                    case 76: character = "L"; break;
                    case 77: character = "M"; break;
                    case 78: character = "N"; break;
                    case 79: character = "O"; break;
                    case 80: character = "P"; break;
                    case 81: character = "Q"; break;
                    case 82: character = "R"; break;
                    case 83: character = "S"; break;
                    case 84: character = "T"; break;
                    case 85: character = "U"; break;
                    case 86: character = "V"; break;
                    case 87: character = "W"; break;
                    case 88: character = "X"; break;
                    case 89: character = "Y"; break;
                    case 90: character = "Z"; break;
                    default: character = "other"; return;
                }
                for (var i = 0; i < SelectedNode_Tree.get_nodes().get_count(); i++) {
                    var node = SelectedNode_Tree.get_nodes().getNode(i);
                    if (node.get_text().charAt(0) == character && !node.get_selected()) {
                        //tree.trackChanges();
                        //tree.get_selectedNode().toggle();
                        node.get_element().scrollIntoView();
                        //tree.commitChanges();
                        node.select();
                        //node.set_expanded(true);
                        break;
                    }
                }

            }
            else {

                var character = null;
                var node = args.get_node();
                var nodes = tree.get_nodes();
                var selectedNode = tree.get_selectedNode();

                alert(nodes.indexOf(selectedNode));
                var key = args.get_domEvent().keyCode;
                switch (key) {
                    case 65: character = "A"; break;
                    case 66: character = "B"; break;
                    case 67: character = "C"; break;
                    case 68: character = "D"; break;
                    case 69: character = "E"; break;
                    case 70: character = "F"; break;
                    case 71: character = "G"; break;
                    case 72: character = "H"; break;
                    case 73: character = "I"; break;
                    case 74: character = "J"; break;
                    case 75: character = "K"; break;
                    case 76: character = "L"; break;
                    case 77: character = "M"; break;
                    case 78: character = "N"; break;
                    case 79: character = "O"; break;
                    case 80: character = "P"; break;
                    case 81: character = "Q"; break;
                    case 82: character = "R"; break;
                    case 83: character = "S"; break;
                    case 84: character = "T"; break;
                    case 85: character = "U"; break;
                    case 86: character = "V"; break;
                    case 87: character = "W"; break;
                    case 88: character = "X"; break;
                    case 89: character = "Y"; break;
                    case 90: character = "Z"; break;
                    default: character = "other"; return;
                }
                for (var i = 0; i < tree.get_nodes().get_count(); i++) {

                    var node = tree.get_nodes().getNode(i);
                    if (node.get_text().charAt(0) == character && !node.get_selected()) {
                        //tree.trackChanges();
                        //tree.get_selectedNode().toggle();
                        node.get_element().scrollIntoView();
                        //tree.commitChanges();
                        node.select();

                        //node.set_expanded(true);
                        break;
                    }
                }

            }


        }

[Kate]

Hi Sreenivas,

In general the Filtering functionality is a custom scenario and it is not officially supported with the RadTreeView although we created a Code Library to help our customers implement this functionality. However, since we recently introduced the Filtering functionality with the RadDropDownTree I would highly recommend using it instead of the RadTreeView. Please refer to this on-line demo where you can observe how it works. 


Regards,
Kate
Telerik