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 for Vue is a client-side wrapper for the Kendo UI TreeList widget.

Basic Usage

The following example demonstrates how to initialize the TreeList.

<div id="vueapp" class="vue-app">
    <kendo-treelist :data-source="localData"
        <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>

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


To initialize the TreeList, either:

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' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.treelist' // Imports only the TreeList script and its dependencies
    import '@progress/kendo-theme-default/dist/all.css'
    import { TreeList, TreeListInstaller } from '@progress/kendo-treelist-vue-wrapper'
    new Vue({
       el: '#app',
       components: {

Functionality and Features


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"

    <kendo-treelist data-source-ref="remoteDataSource"
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
        <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>

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