[英]How to select menu item programmatically in Kendo menu
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. 另外,我无法通过数据源将ID分配给呈现的“ li”,这使得难以选择菜单的节点。
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. 不知道Kendo API是否支持触发选择项,但是我能够使用JQuery通过键盘快捷键单击菜单项。
Check this JSFiddle 检查这个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. 您可以在keydown事件中使用上述功能。 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.