node selected event - keyboard

8 posts, 1 answers
  1. Alex
    Alex avatar
    26 posts
    Member since:
    Sep 2007

    Posted 14 Sep 2008 Link to this post

    Is there a way to handle a client side and/or server side event when a node is selected using the keyboard arrow keys?

    Thanks,
    Alex
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 16 Sep 2008 Link to this post

    Hi Alex,

    I suggest you use OnClientKeyPressing event of RadTreeView. You can check if the pressed key is one of the arrow keys like this:

    <script>                 
       function OnClientKeyPressing(sender, args)              
           {                     
                 
               var node = args.get_node();  
               var key = args.get_domEvent().keyCode;                  
                 
               if(key == "38" or key == "40") {  
                  //do something  
                }           
           }                 
         
    </script>      
     

    Hope this helps.

    Kind regards,
    Yana
    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. Alex
    Alex avatar
    26 posts
    Member since:
    Sep 2007

    Posted 17 Sep 2008 Link to this post

    Yana,

    Thank you for your quick response. I tried OnClientKeyPressing just like you suggested, and I discovered that the node which is reporting the event is the node that was previously selected, not the node that becomes selected. And of course this makes sense - the function is named OnClientKeyPressing, not OnClientKeyPressed.

    What I would like, is to obtain the text of the node which becomes selected after the key is pressed, in my case AFTER the up and down arrows are pressed. Is there an event that can be handled for the newly selected node after a key is pressed, or better yet, when a node becomes selected?

    Yet your suggestion gave me an idea for a work-around!  We can determine the next sibling of the node that triggered the event using the tree. Please take a look at the following code:

    function OnKeyPressingInTree(sender, eventArgs) 
    {        
           var key = eventArgs.get_domEvent().keyCode; 
            
           if(key == "40")  // down-arrow 
           {   
              var tree = $find("<%= RadTreeView1.ClientID %>"); 
              var node = tree.get_selectedNode(); 
              var nextNode = node.get_nextNode(); 
              var tbPath; 
              tbPath = $get("Label1"); 
              tbPath.innerHTML = nextNode.get_text();         
           }                              

    However this is not as straight-forward as it would be for a dedicated event of course, and presents a challenge in having to determine the context of the node which triggered OnClientKeyPressing. For example, with a node that has children nodes, when the down arrow is pressed, the child is selected, but the above logic would display the text for the next node in the tree, not the child node.

    Please let me know if I am missing something, and if there is a better way of doing this!

    Thank you,
    Alex



  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Sep 2008 Link to this post

    Hi Alex,

    I understand your point, there's really no way to get the node that becomes selected in OnClientKeyPressing event handler. But I found a different approach, you can use get_allNodes() client-side method which returns all items ordered in the way you need them. So here is example code for the down arrow key:

    function OnClientKeyPressing(sender, args)              
    {                              
          var node = args.get_node();  
          var tree = $find("<%= TreeView1.ClientID %>");  
          var nodes = tree.get_allNodes();  
          for (var i=0; i<nodes.length;i++)     
          {           
             if(nodes[i] == node)  
             {  
                 alert(nodes[i+1].get_text());  
                 break;  
             }     
          }                  
     }  


    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Alex
    Alex avatar
    26 posts
    Member since:
    Sep 2007

    Posted 27 Sep 2008 Link to this post

    Hi Yana,

    This could be a possible framework for a work-around as well. It appears we still have to manage the context with your approach? Please consider the following scenario:

    Node1  <-- selected, collapsed
    --- child 1
    --- child 2
    Node2

    Node1 is selected but collapsed, no children visible.
    I click the down arrow, the alert displays the text for child1, but the next node that becomes selected is Node2 ...

    I guess until the nodeSelected event is introduced, this is the only way... I will work on the context guessing, I will post to the library once I have it working. Let me know if this event becomes available in the next release please!

    Thank you,
    Alex
  7. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 29 Apr 2009 Link to this post

    Hi,

    I'm facing the same problem - and it looks as if there is still no "nodeSelected" event available.

    My scenario is a Master / Detail Situation.
    The users selects an element in the tree - and I display details about it on the page.

    And although you say "full keyboard support" - this in not a matter of facts.
    I looks like (yes the node gets it's "selected style") - but it seems there is no way to handle this event when it is done with the keyboard instead of the mouse.

    Also the documentation is confusing -
    OnClientNodeClicked: occurs when a node is navigated to by the mouse or keyboard

    I'v built a workaround - so this is no stopper for me - I'm just curious if you plan to implement keyboard support for this.
    By the way - the workaround (rough and dirty) is simply to start a timer (in on ClientKeyPressing)- which checks for the selected node.

    Regards

    Manfred
  8. Fabrizio
    Fabrizio avatar
    2 posts
    Member since:
    Nov 2008

    Posted 12 May 2012 Link to this post

    I've found Alex solution to be very usufel to me.
    Since I havent found any updates till the actual version of the control (2012), I'm posting
    a complete implementation.
     

        function ClientKeyPressing(sender, args) {
            var node = args._node;
            var key = args.get_domEvent().keyCode;
            var newNode;
           
            if (key == "38")  // up-arrow
            {
                newNode = node.get_previousNode();
                if (newNode == undefined) {
                    newNode = node.get_parent();
                } else {
                    if (newNode._children != null && newNode._expanding) newNode = newNode._children._array[newNode._children.get_count() - 1];
                }
                if (newNode == node.get_treeView()) newNode = null;
            }

            if (key == "40")  // down-arrow
            {
                if (node._children != null && node._expanding) {
                    newNode = node._children._array[0];
                } else {
                    newNode = node.get_nextNode();
                    if (newNode == null) {
                        newNode = node.get_parent();
                        if (newNode != node.get_treeView()) {
                            newNode = newNode.get_nextNode();
                        } else {
                            newNode = null;
                        }
                    }
                }
            }

            if (newNode) {
                // .. do something
            }
        }

    Regards,
    Fabrizio.

     

     

     

     

  9. Fabrizio
    Fabrizio avatar
    2 posts
    Member since:
    Nov 2008

    Posted 12 May 2012 Link to this post

    I've found Alex solution to be very useful to me.
    Since I havent found any updates till the actual version of the control (2012), I'm posting
    a complete implementation.
     

        function ClientKeyPressing(sender, args) {
            var node = args._node;
            var key = args.get_domEvent().keyCode;
            var newNode;
           
            if (key == "38")  // up-arrow
            {
                newNode = node.get_previousNode();
                if (newNode == undefined) {
                    newNode = node.get_parent();
                } else {
                    if (newNode._children != null && newNode._expanding) newNode = newNode._children._array[newNode._children.get_count() - 1];
                }
                if (newNode == node.get_treeView()) newNode = null;
            }

            if (key == "40")  // down-arrow
            {
                if (node._children != null && node._expanding) {
                    newNode = node._children._array[0];
                } else {
                    newNode = node.get_nextNode();
                    if (newNode == null) {
                        newNode = node.get_parent();
                        if (newNode != node.get_treeView()) {
                            newNode = newNode.get_nextNode();
                        } else {
                            newNode = null;
                        }
                    }
                }
            }

            if (newNode) {
                // .. do something
            }
        }

    Regards,
    Fabrizio.

     

     

     

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017