Add Shift+F10 Context Menu Navigation for RadGrid

2 posts, 0 answers
  1. Eyup
    Admin
    Eyup avatar
    3990 posts

    Posted 25 Dec 2017 Link to this post

    Requirements


    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Programming language

    JavaScript, C#

    PROJECT DESCRIPTION

    This sample demonstrates how you can override the default Shift+F10 keyboard shortcut combination of the browser and display the grid's own custom RadContextMenu instead. This will happen only when the grid is focused so that the users won't lose their default keyboard functionality when navigating through the other parts of the page.

    After the context menu is opened using the keyboard Shift+F10 shortcut, the focus will remain on the last active grid cell. The only exception here is the FireFox browser, which reserves the focus for its own menu and this cannot be changed since this behavior does not depend on any page logic, but it is the built-in default functionality of the browser itself.
  2. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 22 Mar 2018 in reply to Eyup Link to this post

    Tweaking a bit the gridContextMenu function as follows achieves focusing of the ContextMenu and then refocusing the Grid when the ContextMenu is closed

    function gridContextMenu(gridEl, event) {
        // some other code here....
        if (event.which == 3) {
            if ($(event.target).closest("td").prop("class") == "rgActiveCell rgSelectedCell") {
                menu.show(event);
            }
        }
        else {
            var menuX = $(cell).position().left + $(cell).width() / 2;
            var menuY = $(cell).position().top + $(cell).height() / 2;
            menu.showAt(menuX, menuY);
            // START focus the context menu and refocus grid when hiding
            var item = menu.get_items().getItem(0);
            item.get_element().firstElementChild.focus()
            menu.add_hidden(function () { gridEl.focus() });
            // END focus the context menu and refocus grid when hiding
        }
    }

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.