All Components

Data Binding

The PanelBar provides support for binding it to local data arrays and to remote data services.

Binding to Local Data Arrays

To populate the PanelBar with local data, bind it to a local data array by using the Kendo UI Data Source component.

<div id="vueapp" class="vue-app">
    <kendo-panelbar :data-source="localDataSource">
    </kendo-panelbar>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            localDataSource: new kendo.data.HierarchicalDataSource({
                data: [
                    {
                        text: 'Countries',
                        items: [
                            { text: 'China' },
                            { text: 'Japan' },
                            { text: 'Russia' }
                        ]
                    },
                    {
                        text: 'Sports',
                        items: [
                            { text: 'Swimming' },
                            { text: 'Golf' }
                        ]
                    }
                ]
            })
        }
    }
})

Binding to Remote Data

To initialize the PanelBar by binding it to a remote data service, use the Kendo UI Data Source component. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as XML, JSON, and JSONP.

<div id="vueapp" class="vue-app">
    <kendo-panelbar :data-source="dataSource"
                    :data-text-field="'FullName'">
    </kendo-panelbar>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            dataSource: new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: 'https://demos.telerik.com/kendo-ui/service/Employees',
                        dataType: 'jsonp'
                    }
                },
                schema: {
                    model: {
                        id: 'EmployeeId',
                        hasChildren: 'HasEmployees'
                    }
                }
            })
        }
    }
})
In this article