RadContextMenu close with escape keypress

[swegele]

I have a page with 6 tabs.  In each tab is a RadGrid with a ContextMenu. 

I am enabling keyboard support for the page and successfully have the context menus opening with hotkey (Shift+F10) by capturing onkeydown in RadGrids.

But how do I detect (when menu is open) that the escape key has been pressed so I can call menu.close();

I tried attaching an onkeydown attribute handler to the menu but that didn't work.

Thanks,

Sean

[Ivan Danchev]

Hello Sean,

If you subscribe to the Grid's OnKeyPress client-side event through the arguments you can detect an Enter key pressed and close the ContextMenu if it is already open:

function OnKeyPress(sender, eventArgs) {
    var menu = $find("<%= RadMenu1.ClientID %>");
    if (eventArgs.get_keyCode() == 13 && menu._shown) {
        menu.hide();
    }
}

Regards,
Ivan Danchev
Telerik

[swegele]

The RadMenu already handles closing on "esc" key press.  But the RadContextMenu does not.  So... 

The problem is the keypress event is not fired on the grid / tree view / button etc because the key is connected to the RadMenu_Context "ID_detached" element.  So I did the following:

1.  When context menu activated...call method that uses jQuery to hook menu elements for keydown

2.  Keep track of the active control that fired the show of the context menu

3.  When escape pressed then close the menu and refocus the original control.  See below code

//used below for when context menus are activated we keep track of the control that triggered so we can
//  close the menu on escape and put focus back to control that previously opened it
var controlToRefocusIfMenuEscaped = null;
function CommonCloseMenuOnEscapeKey() {
    //hook to each contextMenu and watch for onkeydowns and if shown then close
    //unhook any first so we don't end up with multiples firing and use namespace .yourns to
    //only unhook our own so we don't step on telerik toes
    $('.RadMenu_Context').off('keydown.yourns').on('keydown.yourns, function (evt) {
        var evt = evt || window.event;
        var code = evt.keyCode;
        if (code == 27) {
            $telerik.cancelRawEvent(evt);

            //hide the menu
            $(this).toggle();

            if (controlToRefocusIfMenuEscaped) {
                //focus control that opened menu
                setTimeout(function () {
                    controlToRefocusIfMenuEscaped.focus();
                    controlToRefocusIfMenuEscaped = null;
                }, 0);
            }
        }
    });
}

[Ivan Danchev]

Hello Sean,

Thank you for sharing your solution.

Regards,
Ivan Danchev
Telerik