All Components

TreeListDataSource Overview

The TreeListDataSource extends the DataSource component.

It contains instances of the custom kendo.data.TreeListModel model, which represents the TreeList data items.

The following example demonstrates how to bind the TreeList to the TreeListDataSource.

<div id="vueapp" class="vue-app">
    <kendo-treelistdatasource ref="treelistdatasource1"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :schema-model="model">
    </kendo-treelistdatasource>
    <kendo-treelist :data-source-ref="'treelistdatasource1'"
                    :height="'600px'"
                    :filterable="true"
                    :sortable="true">
        <kendo-treelist-column :field="'FirstName'" :title="'First Name'" :width="180"></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="120"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
        <kendo-treelist-column :field="'Phone'" :width="150"></kendo-treelist-column>
        <kendo-treelist-column :field="'Address'"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(DataSourceInstaller);
Vue.use(TreeListInstaller);

new Vue({
    el: '#vueapp',
    data:  {
        model: {
            id: 'EmployeeID',
            parentId: 'ReportsTo',
            fields: {
              ReportsTo: { field: 'ReportsTo', nullable: true },
              EmployeeID: { field: 'EmployeeId', type: 'number' },
              Extension: { field: 'Extension', type: 'number' }
            },
            expanded: true
        }
    }
})
In this article