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