This is a migrated thread and some comments may be shown as answers.

RadContextMenu close with escape keypress

3 Answers 198 Views
Menu
This is a migrated thread and some comments may be shown as answers.
swegele
Top achievements
Rank 1
swegele asked on 03 Jan 2016, 09:49 AM

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

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 06 Jan 2016, 05:26 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
swegele
Top achievements
Rank 1
answered on 06 Jan 2016, 07:56 PM

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);
            }
        }
    });
}

0
Ivan Danchev
Telerik team
answered on 11 Jan 2016, 03:48 PM
Hello Sean,

Thank you for sharing your solution.

Regards,
Ivan Danchev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Menu
Asked by
swegele
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
swegele
Top achievements
Rank 1
Share this question
or