All Components

Data Binding

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

Binding to Local Data Arrays

The following example demonstrates how to create a TreeList and bind it to a local data source.

<div id="vueapp" class="vue-app">
    <kendo-treelist :data-source="localData"
                    :filterable="true"
                    :sortable="true">
        <kendo-treelist-column :field="'id'" :width="50"></kendo-treelist-column>
        <kendo-treelist-column :field="'Name'" :width="140"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" :width="140"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            localData: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1,    Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1,    Name: "Bob Price",  Position: "EVP Marketing" }
            ]
        }
    }
})

Binding to Remote Data Services

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

Using the TreeListDataSource Component

The following example demonstrates how to bind the TreeList to a remote TreeListDataSource component.

<div id="vueapp" class="vue-app">
    <script id="photo-template" type="text/x-kendo-template">
        <div class='employee-photo'
            style='background-image: url(https://demos.telerik.com/kendo-ui/content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
        <div class='employee-name'>#: FirstName #</div>
    </script>
    <kendo-treelistdatasource ref="remoteDataSource"
                              :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="remoteDataSource"
                    :height="'540px'"
                    :filterable="true"
                    :sortable="true">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="230"
                               :template="columnTemplate" ></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="90"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
        <kendo-treelist-column :field="'Phone'" :width="130"></kendo-treelist-column>
        <kendo-treelist-column :field="'Address'"></kendo-treelist-column>
    </kendo-treelist>
</div>
<style>
    .employee-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .employee-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            model: {
                id: 'EmployeeID',
                parentId: 'ReportsTo',
                fields: {
                    ReportsTo: { field: 'ReportsTo', nullable: true },
                    EmployeeID: { field: 'EmployeeId', type: 'number' },
                    Extension: { field: 'Extension', type: 'number' }
                },
                expanded: true
            }
        }
    },
    methods: {
        columnTemplate (data) {
            var itemTemplate = kendo.template(kendo.jQuery('#photo-template').html())
            return itemTemplate(data)
        }
    },
})

Using the data Method

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

<div id="vueapp" class="vue-app">
    <kendo-treelist :data-source="remoteDataSource"
                    :height="'540px'"
                    :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="100"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
        <kendo-treelist-column :field="'Phone'" :width="130"></kendo-treelist-column>
        <kendo-treelist-column :field="'Address'"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            remoteDataSource: new kendo.data.TreeListDataSource({
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    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