How to select menu item programmatically in Kendo menu

Question

I have a menu with values and I want to add a Key shortcut that will select that item.

I can demonstrate in this fiddle exactly what I am looking for

function onSelect(e) {
    var item = $(e.item),
        menuElement = item.closest(".k-menu"),
        dataItem = this.options.dataSource,
        index = item.parentsUntil(menuElement, ".k-item").map(function () {
            return $(this).index();
        }).get().reverse();

    index.push(item.index());

    for (var i = -1, len = index.length; ++i < len;) {
        dataItem = dataItem[index[i]];
        dataItem = i < len-1 ? dataItem.items : dataItem;
    }

    alert(dataItem.value);
}

$(document).ready(function() {

    $("#menu").kendoMenu({
        dataSource: [
            {
                text: "Item 1 (A)",
                value: "A",
                items: [
                    {
                        text: "Sub Item 1 (L)",
                        value: "L",
                        items: [
                            {
                                text: "Sub Sub Item 1 (D)",
                                value: "D"
                            },
                            {
                                text: "Sub Sub Item 2 (E)",
                                 value: "E"
                            }
                         ]
                    },
                    {
                        text: "Sub Item 2 (O)",
                        value: "O"
                    }
                ]
            },
            {
                text: "Item 2 (F)",
                value: "F"
            },
            {
                text: "Item 3 (G)",
                value: "G"
            }
        ],
        select: onSelect
    });

    $(document.body).keydown(function (e) {
            var menu = $("#menu").kendoMenu().data("kendoMenu");
            if (e.altKey && e.keyCode == 76) {
                alert("select item with value L");
                // Pseudocode:
                // var item = find item with value L
                // menu.select(item); (or trigger)
            }
        }); 
});

I couldn't find anywhere any resources that could accomplish that. Also I can't assign ids to the rendered "li" via the datasource which makes it hard to select a node of the menu.

Any ideas?

Can you use more actual version on Kendo in your project then as it is in your fiddle (v. 2011.3.1129). I can help you in version 2012 Q3 SP1 or later. — Jarosław Kończak, Feb 21 '15 at 21:14

score 0 · Accepted Answer · answered Feb 22 '15 at 05:25

Not sure if Kendo API supports triggering select item but I was able to achieve click the menu items with keyboard shortcuts using JQuery.

Check this JSFiddle

function clickMenuSpan(keyCode){
    var shortcut = String.fromCharCode(keyCode);

    $('#menu span.k-link').each(function(){
        var txt = $(this).text();

        if(txt.substr(-3) === '(' + shortcut + ')')
        {
            $(this).click();
        }

    })
}

You can use the above function in your keydown event. And add some filters to call this only for your array of shortcuts.

 $(document.body).keydown(function (e) {
        var menu = $("#menu").kendoMenu().data("kendoMenu");
        if (e.altKey) {

            clickMenuSpan(e.keyCode);
        }
    });

Hey thanks for that. I went with another method. I extracted out all the events in an array and used the index of that, which meant I no longer had to load the menu. But this looks good too — Nick, Feb 23 '15 at 09:28

How to select menu item programmatically in Kendo menu

1 Answers1