All Components

Data Binding

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

Binding to Local Data Arrays

The TreeView enables you to bind it to:

Simple Local Data Binding

The following example demonstrates how to create and bind the TreeView to a simple local data source.

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

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            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' }
                        ]
                    }
                ]
            })
        }
    }
})

Complex Local Data Binding

The following example demonstrates how to create and bind the TreeView to a complex local data source.

<div id="vueapp" class="vue-app">
    <kendo-treeview :data-source="complexLocalDataSource"
                    :data-text-field="['categoryName', 'subCategoryName']">
    </kendo-treeview>
</div>
Vue.use(TreeViewInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            complexLocalDataSource: new kendo.data.HierarchicalDataSource({
                data: [
                    {
                        categoryName: 'Storage',
                        subCategories: [
                            { subCategoryName: 'Wall Shelving' },
                            { subCategoryName: 'Floor Shelving' },
                            { subCategoryName: 'Kids Storage' }
                        ]
                    },
                    {
                        categoryName: 'Lights',
                        subCategories: [
                            { subCategoryName: 'Ceiling' },
                            { subCategoryName: 'Table' },
                            { subCategoryName: 'Floor' }
                        ]
                    }
                ],
                schema: {
                    model: {
                    children: 'subCategories'
                    }
                }
            })
        }
    }
})

Binding to Remote Data Services

You can bind the TreeView to a remote dataset by either:

Using the HierarchicalDataSource Component

The following example demonstrates how to bind the TreeView to a HierarchicalDataSource component.

<div id="vueapp" class="vue-app">
    <kendo-hierarchicaldatasource ref="remoteDataSourceComponent"
                                  :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-treeview data-source-ref="remoteDataSourceComponent"
                    :data-text-field="'FullName'">
    </kendo-treeview>
</div>
Vue.use(TreeViewInstaller);
Vue.use(DataSourceInstaller);

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

Using the data Method

The following example demonstrates how to bind the TreeView to remote data by using the data method.

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

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'
                    }
                }
            })
        }
    }
})
In this article