All Components

TreeList Overview

The TreeList enables you to display self-referencing tabular data and to sort, filter, and edit its data.

It also shows a parent-child relation between the TreeList data items.

The TreeList wrapper fro Vue is a client-side wrapper for the Kendo UI TreeList widget.

Installation

To initialize the TreeList, either:

Initializing from CDN

The following example demonstrates how to initialize the TreeList component by using the CDN services. To access all CDN references, open the sample in Plunker.

<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" }
            ]
        }
    }
})

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI TreeList package for Vue.

    npm install --save @progress/kendo-treelist-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { TreeList } from '@progress/kendo-treelist-vue-wrapper'
    import { TreeListInstaller } from '@progress/kendo-treelist-vue-wrapper'
    
    Vue.use(TreeListInstaller)
    
    new Vue({
       el: '#app',
       components: {
           TreeList
       }
    })

Features and Functionalities

Events

The following example demonstrates basic TreeList events. You can subscribe to all TreeList events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-treelistdatasource ref="remoteDataSource"
                              :batch="true"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :transport-update-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Update'"
                              :transport-update-data-type="'jsonp'"
                              :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Destroy'"
                              :transport-destroy-data-type="'jsonp'"
                              :transport-create-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/Create'"
                              :transport-create-data-type="'jsonp'"
                              :transport-parameter-map="parameterMap"
                              :schema-model="model">
    </kendo-treelistdatasource>

    <kendo-treelist data-source-ref="remoteDataSource"
                    :toolbar="['create']"
                    :height="'540px'"
                    :editable="true"
                    @edit="onEdit"
                    @save="onSave"
                    @remove="onRemove"
                    @dataBound="onDataBound"
                    @dataBinding="onDataBinding">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="180"></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="90"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" :width="140"></kendo-treelist-column>
        <kendo-treelist-column :field="'Phone'" :title="'Phone'" :width="130"></kendo-treelist-column>
        <kendo-treelist-column :title="'Edit'" :command="['edit', 'destroy']" :width="200"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                    EmployeeId: { type: "number", editable: false, nullable: false },
                    ReportsTo: { nullable: true, type: "number" },
                    FirstName: { validation: { required: true } },
                    LastName: { validation: { required: true } },
                    HireDate: { type: "date" },
                    Phone: { type: "string" },
                    HireDate: { type: "date" },
                    BirthDate: { type: "date" },
                    Extension: { type: "number", validation: { min: 0, required: true } },
                    Position: { type: "string" }
                },
                expanded: true
            }
        }
    },
    methods: {
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        },
        onEdit: function (ev) {
            console.log("Event :: edit");
        },
        onSave: function (ev) {
            console.log("Event :: save");
        },
        onRemove: function (ev) {
            console.log("Event :: remove");
        },
        onDataBound: function (ev) {
            console.log("Event :: dataBound");
        },
        onDataBinding: function (ev) {
            console.log("Event :: dataBinding");
        },
    }
})
In this article