Skip to content

Instantly share code, notes, and snippets.

@bundyo
Created March 30, 2012 16:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bundyo/2252670 to your computer and use it in GitHub Desktop.
Save bundyo/2252670 to your computer and use it in GitHub Desktop.
Kendo UI Menu item source
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script type='text/javascript' src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
</head>
<body>
<ul id="menu"></ul>
<script>
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",
value: "Item 1 Value",
items: [
{
text: "Sub Item 1",
value: "Sub Item 1 Value",
items: [
{
text: "Sub Sub Item 1",
value: "Sub Sub Item 1 Value"
},
{
text: "Sub Sub Item 2",
value: "Sub Sub Item 2 Value"
}
]
},
{
text: "Sub Item 2",
value: "Sub Item 2 Value"
}
]
},
{
text: "Item 2",
value: "Item 2 Value"
},
{
text: "Item 3",
value: "Item 3 Value"
}
],
select: onSelect
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment