Tree view matched node selection based on Keypress

4 posts, 0 answers
  1. Sreenivas
    Sreenivas avatar
    5 posts
    Member since:
    Mar 2013

    Posted 06 Jun 2013 Link to this post


    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Jun 2013 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sreenivas
    Sreenivas avatar
    5 posts
    Member since:
    Mar 2013

    Posted 19 Jun 2013 Link to this post


    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;
                        }
                    }
                 
                }
                 
                 
            }
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Jun 2013 Link to this post

    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
    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.
Back to Top