Kendo UI PanelBar item source
PanelBar 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="panelbar"></ul>
CSS
html { font: 12px Arial, Helvetica, sans-serif; }
JavaScript
function onSelect(e) {
var item = $(e.item),
panelElement = item.closest(".k-panelbar"),
dataItem = this.options.dataSource,
index = item.parentsUntil(panelElement, ".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(panelElement);
}
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
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
});
});