All Components

Columns

The TreeList enables you to resize and reorder its columns.

The following example demonstrates how to modify the TreeList by using the column resizing and reordering functionality.

<div id="vueapp" class="vue-app">
    <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"
                    :resizable="true"
                    :reorderable="true">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="250"
                               :expandable="true">
        </kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
        <kendo-treelist-column :field="'Extension'" :title="'Ext'"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
        data: {
            model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                    EmployeeId: { type: "number", nullable: false },
                    ReportsTo: { nullable: true, type: "number" }
                }
            }
    }
})
In this article