All Components

Components / Layout / Splitter

Loading Content with AJAX

The Splitter provides the built-in option for asynchronously loading content from a URL into the Splitter pane.

The URL is expected to return an HTML fragment that can be loaded in the panes of the Splitter.

<div id="vueapp" class="vue-app">
    <kendo-splitter :panes="panes">
        <div></div>
        <div></div>
    </kendo-splitter>
</div>
Vue.use(LayoutInstaller);

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