All Components

Setting the DataSource

The PanelBar gets populated with data by using the Kendo UI DataSource for Vue and by utilizing the Kendo UI DataSource for jQuery which is an abstraction for using local and remote data and provides specific data-binding settings.

To pass a reference to the Kendo UI DataSource for Vue and bind the PanelBar to the Kendo UI DataSource for jQuery, use the data-source-ref prop.

<div id="vueapp" class="vue-app">
    <kendo-hierarchicaldatasource ref="dataSourceComponent"
                :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Employees'"
                :transport-read-data-type="'jsonp'"
                :schema-model-id="'EmployeeId'"
                :schema-model-has-children="'HasEmployees'">
    </kendo-hierarchicaldatasource>

    <kendo-panelbar :data-source-ref="'dataSourceComponent'"
                    :data-text-field="'FullName'">
    </kendo-panelbar>
</div>
Vue.use(LayoutInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})

To define the data to which the PanelBar will be bound as a data property, use the dataSource prop.

<div id="vueapp" class="vue-app">
    <kendo-panelbar :data-source="remoteDataSource"
                    :data-text-field="'FullName'">
    </kendo-panelbar>

    <br />

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

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            remoteDataSource: new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: 'https://demos.telerik.com/kendo-ui/service/Employees',
                        dataType: 'jsonp'
                    }
                },
                schema: {
                    model: {
                        id: 'EmployeeId',
                        hasChildren: 'HasEmployees'
                    }
                }
            }),
            localDataSource: new kendo.data.HierarchicalDataSource({
                data: [
                    {
                        text: 'Furniture',
                        items: [
                            { text: 'Tables & Chairs' },
                            { text: 'Sofas' },
                            { text: 'Occasional Furniture' }
                        ]
                    },
                    {
                        text: 'Decor',
                        items: [
                            { text: 'Bed Linen' },
                            { text: 'Curtains & Blinds' },
                            { text: 'Carpets' }
                        ]
                    }
                ]
            })
        }
    }
})

To declare the dataSource items as child components for the PanelBar, use the KendoPanelBarItem components.

<div id="vueapp" class="vue-app">
    <kendo-panelbar>
        <kendo-panelbar-item text="Furniture">
            <kendo-panelbar-item text="Tables"></kendo-panelbar-item>
            <kendo-panelbar-item text="Sofas"></kendo-panelbar-item>
            <kendo-panelbar-item text="Occasional Furniture"></kendo-panelbar-item>
        </kendo-panelbar-item>
        <kendo-panelbar-item text="Decor"
                             :items="[{ text: 'Bed Linen' },
                                      { text: 'Curtains' },
                                      { text: 'Carpets' }]">
        </kendo-panelbar-item>
    </kendo-panelbar>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: "#vueapp"
})
In this article