node selected event - keyboard

[Alex]

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

[Yana]

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.

[Alex]

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

[Yana]

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.

[Alex]

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

[ManniAT]

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

[Fabrizio]

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.

 

 

 

 

[Fabrizio]

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.