RadContextMenu close with escape keypress

4 posts, 0 answers
  1. swegele
    swegele avatar
    20 posts
    Member since:
    Apr 2007

    Posted 03 Jan Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 06 Jan Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. swegele
    swegele avatar
    20 posts
    Member since:
    Apr 2007

    Posted 06 Jan in reply to Ivan Danchev Link to this post

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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 11 Jan Link to this post

    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
Back to Top