RadContextMenu RadTreeView Keyboard Support

[Kai]

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

[Kai]

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

[Yana]

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.

[Kai]

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

[Kai]

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

[Yana]

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.

[Kai]

Yana,

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

Kai thao