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