Keyboard navigation between several menus

[Maxime]

Hello,

I have 3 separate "RadMenu" in my page. I would like to be able to navigate between them.

Is there an easy way to access my first menu (with the assigned keys combination), go to the end of my first menu and instead of going back to the start of my menu, go to the start of my second menu, then my third and then my first.

The only thing I could see right now, would be to assign different keys combinations to each one of them (as it should be) and try to detect the end of each one of my menus to trigger the keys combinations of the next menu.

Is there an easier way?

 

Regards,

Maxime

[Peter Milchev]

Hello Maxime,

You are correct, the keyboard navigation would be unnatural if the focus goes between menus instead of looping within the items. 

Nevertheless, you can subscribe to the keydown event for the .RadMenu elements as demonstrated below and handle the focusing with a custom code.

<script>
    function pageInitHandler() {

        $telerik.$(".RadMenu").on("keydown", function (ev) {
            var menu = ev.target.control;
            var focusedItem = menu.get_focusedItem();
            var rootItemsCount = menu.get_items().get_count();
            // if it is a root item
            if (focusedItem.get_level() == 0) {
                if (ev.keyCode == 37 && focusedItem.get_index() == 0) { // left arrow
                    // select the previous Menu 
                    // optionally cancel the event
                    $telerik.cancelRawEvent(ev);
                }
                else if (ev.keyCode == 39 && focusedItem.get_index() == rootItemsCount - 1) { // right arrow
                    // select the next Menu
                    // optionally cancel the event
                    $telerik.cancelRawEvent(ev);
                }
            }
        })
        // Sys.Application.remove_load(pageInitHandler);
    }
    Sys.Application.add_init(pageInitHandler);
</script>

Regards,
Peter Milchev
Progress Telerik