Data Bindingng

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

Binding to Local Data Arrays

The DropDownTree enables you to bind it to:

Simple Local Data Binding

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

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree :data-source="localDataSource" :placeholder="'Select ...'" style="width: 300px;"></kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);

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 DropDownTree to a complex local data source.

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree :data-source="complexLocalDataSource"
                        :data-text-field="['categoryName', 'subCategoryName']"
                        :placeholder="'Select ...'"
                        style="width: 300px;">
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);

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 DropDownTree to a remote dataset by:

Defining Inner HierarchicalDataSource

The following example demonstrates how to define an inner HierarchicalDataSource component for the DropDownTree.

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree data-text-field="FullName" data-value-field="EmployeeId">
        <kendo-hierarchicaldatasource slot="kendo-hierarchicaldatasource"
                                      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"
                                      :placeholder="'Select ...'"
                                      style="width: 300px;">
        </kendo-hierarchicaldatasource>
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);
Vue.use(DataSourceInstaller);

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

Using the HierarchicalDataSource Component

The following example demonstrates how to bind the DropDownTree to an external 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"
                                  :placeholder="'Select ...'"
                                  style="width: 300px;">
    </kendo-hierarchicaldatasource>
    <kendo-dropdowntree data-source-ref="remoteDataSourceComponent" data-text-field="FullName">
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);
Vue.use(DataSourceInstaller);

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

Using the data Method

The following example demonstrates how to bind the DropDownTree to remote DataSource that is initialized in the data method.

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree expand-mode="single"
                        :data-source="remoteDataSource"
                        data-text-field="FullName"
                        :placeholder="'Select ...'"
                        style="width: 300px;">
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);

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