All Components

Loading Content with AJAX

The PanelBar provides the built-in option for asynchronously loading content from an array of URLs.

The URLs are expected to return HTML fragments that can be loaded in the items of the PanelBar.

<div id="vueapp" class="vue-app">
    <kendo-panelbar :content-urls="contentUrls">
        <li>
            BODY
            <div></div>
        </li>
        <li>
            ENGINE
            <div></div>
        </li>
        <li>
            TRANSMISSION
            <div></div>
        </li>
        <li>
            PERFORMANCE
            <div></div>
        </li>
    </kendo-panelbar>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
             contentUrls: [
                'https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html',
                'https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent2.html',
                'https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent3.html',
                'https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent4.html'
            ]
        }
    }
})
In this article