All Components

Editing

The Kendo UI TreeList enables you to modify its records.

The available editing options are:

Inline Editing

The following example demonstrates how to edit data in the default inline editing mode.

<div id="vueapp" class="vue-app">
    <script id="photo-template" type="text/x-kendo-template">
        <div class='employee-photo'
            style='background-image: url(http://demos.telerik.com/kendo-ui/content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
        <div class='employee-name'>#: FirstName #</div>
    </script>
    <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">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="200"
                               :expandable="true"></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)};
            }
        }
    }
})

Popup Editing

The following example demonstrates how to edit data in the pop-up editing mode.

<div id="vueapp" class="vue-app">
    <script id="photo-template" type="text/x-kendo-template">
        <div class='employee-photo'
            style='background-image: url(http://demos.telerik.com/kendo-ui/content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
        <div class='employee-name'>#: FirstName #</div>
    </script>
    <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="'popup'">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="200"
                               :expandable="true"></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="100"></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)};
            }
        }
    }
})

Dragging and Dropping

The following example demonstrates how to rearrange the TreeList items by using the drag-and-drop 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"
                    :height="'540px'"
                    :editable-move="true">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="280"></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="160"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></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: {
                    ReportsTo: { field: "ReportsTo",  nullable: true },
                    EmployeeID: { field: "EmployeeId", type: "number" },
                    Extension: { field: "Extension", type: "number" }
                }
            }
        }
    }
})
In this article