Kendo UI Menu item source
Menu access item dataSource on select
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<ul id="menu"></ul>
CSS
html { font: 12px Arial, Helvetica, sans-serif; }
JavaScript
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(JSON.stringify(dataItem.value));
}
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: "Item 1",
value: {toto: 'toto', tata: 'tata'},
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
});
});