RadContextMenu RadTreeView Keyboard Support

7 posts, 1 answers
  1. Kai
    Kai avatar
    23 posts
    Member since:
    Jun 2009

    Posted 13 Jan 2010 Link to this post

    I have a RadTreeview with a RadTreeViewContextMenu.  The RadTreeViewContextMenu should be the same thing as a RadContextMenu correct?

    So I'm trying to do two things here.
    1) Display the context menu using the keyboard.  Preferably [Shift] + [F10].
    2) Set Focus on the context menu when it displays, so I can navigate through it with the keyboard.

    I've attempted at setting focus to the menu first and it just would not work for me.  Giving the focus to the menu in the event OnClientContextMenuShown, gets me this javascript error saying "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."  I've tried setting the menu to display, setting it to enabled, and none of those work, so is this menu of a type that does not accept focus?

    Here is my code

    Javascript
    function onClientContextMenuShown(sender, args) 
         args.get_menu().focus(); 

    Markup
    <telerik:RadTreeView ID="Favorites" runat="server" EnableEmbeddedSkins="False" Skin="KMNetYellow" Width="220px" EnableViewState="false" 
                                                            OnClientContextMenuShowing="onClientContextMenuShowing" 
                                                            OnClientContextMenuShown="onClientContextMenuShown" 
                                                            OnClientContextMenuItemClicked="onFavoriteFolderMenuClicked" 
                                                            OnClientNodeEditStart="OnClientNodeEditStartHandler" 
                                                            OnClientNodeEdited="OnClientNodeEditEndHandler" 
                                                            OnClientNodeExpanding="OnClientNodeExpanding" 
                                                            OnClientNodeCollapsing="OnClientNodeCollapsing"
                                                            <ContextMenus> 
                                                                <telerik:RadTreeViewContextMenu ID="objFavoritesMenu" runat="server" EnableEmbeddedSkins="False" Skin="KMNetGray" EnableViewState="false"
                                                                    <Items> 
                                                                        <telerik:RadMenuItem runat="server" Text="New Folder" Value="NewFolder" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" IsSeparator="True" Text="----------" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" Text="Copy To ..." Value="Copy" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" Text="Move To ..." Value="Move" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" IsSeparator="True" Text="---------" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" Text="Delete" Value="Delete" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                        <telerik:RadMenuItem runat="server" Text="Rename" Value="Rename" EnableViewState="false"
                                                                        </telerik:RadMenuItem> 
                                                                    </Items> 
                                                                </telerik:RadTreeViewContextMenu> 
                                                            </ContextMenus> 
                                                            <DataBindings> 
                                                                <telerik:RadTreeNodeBinding ExpandedImageUrl="/images/icon_openfold.gif" EnableContextMenu="true" ImageUrl="/images/icon_clsdfold.gif"/> 
                                                            </DataBindings> 
                                                        </telerik:RadTreeView> 

    Thanks in  advance.
    Kai Thao

  2. Kai
    Kai avatar
    23 posts
    Member since:
    Jun 2009

    Posted 14 Jan 2010 Link to this post

    Ok, so I did get one thing to work a bit so far.  I was able to get the menu to display on the keypress event.  Even better, I was able to make it display on the keys [Shift] + [F10].  The problem with this now, is that none of my events that are set in the RadTree will work with this menu.  So the OnClientContextMenuShowing, OnClientContextMenuItemClicked, etc.. don't work with this.

    Here is my Javascript Code:
        function OnClientKeyPressing(sender, args) 
        { 
             
            var evt = args.get_domEvent(); 
            var key = evt.keyCode; 
            var bolShiftKey = (evt.shiftKey) ? true : false; 
             
            if (key == 121 &&  bolShiftKey) 
            { 
                var menu = args.get_node().get_contextMenu(); 
                menu.show(evt); 
                 
            } 
         
        } 

    So the problems I'm having still are:
    1) Need to set focus to the menu when it displays
    2) Client Side events need to work on the menu when it displays

    If it helps any, I have the Q2 - 2009 Release of Rad Controls.  I haven't gotten the latest version yet, but I can get those if the fixes are on them.
    Any help on these issues would be greatly appreciated.

    Kai Thao



  3. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 18 Jan 2010 Link to this post

    Hi Kai,

    Please use RadContextMenu instead the built-in context menu in order to be able to fire ItemClick event, I've attached your modified code demosntrating this approach.

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  4. Kai
    Kai avatar
    23 posts
    Member since:
    Jun 2009

    Posted 18 Jan 2010 Link to this post

    Yana,

    I should have made myself more clear before.  What I need is to be able to support both the Keyboard, and Mouse events.  So what I should have said before was I need to be able to:

    1) Open the context menu for the treeview with the keyboard using [Shift] + [F10]
    2) Open the context menu for the treeview with the mouse right clicking on the treeview node
    3) Navigate & Trigger Click events for the context menu with the keyboard using the arrows and the enter key
    4) Navigate & Trigger Click events for the context menu with the mouse left click

    If I don't use the RadContextMenu, I don't know how I will make the menu appear when right clicking on a tree node.  I tried your example and it give me a great idea of how to get the RadContextMenu events to work for a selected tree node.  This I will have to investigate as well.

    It seems though that I still have an issue with setting focus to the ContextMenu regardless of if the menu is one built in with the TreeView, or if it is a separate menu.  Using the focus() method gives me the "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus" javascript error every time.

    Thanks.
    Kai Thao
  5. Kai
    Kai avatar
    23 posts
    Member since:
    Jun 2009

    Posted 18 Jan 2010 Link to this post

    Yana,

    After multiple different attempts, I finally got this thing working, BUT, not the way I would like it to.  Please tell me there is a better way of getting this done.

    What I've had to do to get the right click, and keyboard to display the context menu was to create two exact same context menus.  One is the integrated menu with the rad tree view, and one separate from the rad tree view, using the example you gave me.  This gives me the end result I'm looking for, but I have to have two menus and separate Javascript methods to handle each menu.

    I was also able to get the menu to gain focus when it displays.  In the documentation, it shows that you can use both focus for the ContextMenu, and the ContextMenuItem.  I was trying to give focus to the ContextMenu all this time, and wasn't working.  What finally worked for me was that I simply gave focus to the first item in the menu.  This also drives a question as to, why the focus wasn't working for the ContextMenu.

    Again, please tell me there is a better way of getting this done with just one ContextMenu.

    Thanks for all your help.
    Kai Thao
  6. Answer
    Yana
    Admin
    Yana avatar
    4841 posts

    Posted 19 Jan 2010 Link to this post

    Hello Kai,

    Please find attached modified page which demonstrates the needed requirements with one context menu. Download it and give it a try.

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Kai
    Kai avatar
    23 posts
    Member since:
    Jun 2009

    Posted 20 Jan 2010 Link to this post

    Yana,

    Thanks for your help.  It works just like I need it to.

    Kai thao
Back to Top