Add Shift+F10 Context Menu Navigation for RadGrid

Thread is closed for posting
2 posts, 0 answers
  1. 4513861F-C564-42D2-BC9F-5FAED19E993E
    4513861F-C564-42D2-BC9F-5FAED19E993E avatar
    4090 posts
    Member since:
    Apr 2022

    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. EA29E686-AF27-4642-ABE0-763F955DCF04
    EA29E686-AF27-4642-ABE0-763F955DCF04 avatar
    13 posts
    Member since:
    May 2016

    Posted 22 Mar 2018 in reply to 4513861F-C564-42D2-BC9F-5FAED19E993E 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.