PanelBar Overview
The PanelBar displays hierarchical data in a multi-level, expandable format.
The PanelBar wrapper for Vue is a client-side wrapper for the Kendo UI PanelBar widget.
Basic Usage
The following example demonstrates the PanelBar in action.
<div id="vueapp" class="vue-app">
<kendo-panelbar>
<li>
Baseball
<ul>
<li>Top News</li>
<li>Radio Records</li>
</ul>
</li>
<li>
Golf
<ul>
<li>Top News</li>
<li>Radio Records</li>
</ul>
</li>
</kendo-panelbar>
</div>Vue.use(LayoutInstaller);
new Vue({ el: '#vueapp' })Features and Functionalities
Events
The following example demonstrates basic PanelBar events. You can subscribe to all PanelBar events by the handler name.
<div id="vueapp">
<kendo-panelbar @select="onSelect">
<li>
Item 1
<ul>
<li>Sub Item 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
</ul>
</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</kendo-panelbar>
</div>Vue.use(LayoutInstaller);
new Vue({
el: '#vueapp',
methods: {
onSelect: function (e) {
var selectedItem = $(e.item);
console.log("Selected item : " + selectedItem.text());
}
}
})