Components / Layout / PanelBar

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' })

Functionality and Features

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());
           }
       }
   })

In this article