Editing Basics

You can create, update, and delete the data records of the TreeList.

The TreeList Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Getting Started

The TreeList provides the following editing modes:

  • Basic edit mode - Activated on a row click, this editing mode puts all editable columns in the clicked row, in edit mode.
  • Inline edit mode - This editing mode is similar to the Basic one, but each row enters in edit mode by clicking on a button.
  • In-cell edit mode - The In-Cell edit mode, is activated on a click on a TreeList cell. This mode turns only the clicked cell to edit mode.
  • Editing with external popup form - In this editing mode, the data editing happens by an external popup form that appears over the TreeList.

Basic Edit Mode

The following example demonstrates how to set the TreeList in basic edit mode.

View Source
Change Theme:

Here are some of the main points in the implementation of the above example:

  1. Set the editField property of the TreeList—editField will indicate the editable data items and is part of the temporary data items that are used during editing. For the data items in the edit mode, set the edit state in their editField. In the following example, the id of the edited item is stored in the application state.

    editField: "inEdit"
  2. Create a data tree computed property that holds the edit state of each TreeList data item by using the mapTree function.

    computed: {
        processedData() {
        return mapTree(this.dataItems, this.subItemsField, (item) =>
            extendDataItem(item, this.subItemsField, {
            [this.expandField]: this.expanded.includes(item.id),
            [this.editField]: item.id === this.editId,
  3. Set the editCell property for each TreeList column.

    columns: [
            field: "name",
            title: "Name",
            width: "280px",
            editor: 'text',
            editCell: 'textEditor',
            expandable: true,
            field: "position",
            title: "Position",
            width: "260px",
            editCell: 'textEditor',
            field: "hireDate",
            title: "Hire Date",
            format: "{0:d}",
            width: "170px",
            editCell: 'dateEditor',
            field: "timeInPosition",
            title: "Year(s) in Position",
            width: "170px",
            editCell: 'numericEditor',
            field: "fullTime",
            title: "Full Time",
            width: "160px",
            editCell: 'booleanEditor',
  4. Define the slot templates passed to each editCell property in the previous step using the built-in editor components -

TreeListTextEditor, TreeListNumericEditor,TreeListDateEditor, and TreeListBooleanEditor.

    <template v-slot:textEditor={props}>
        <TreeListTextEditor v-bind="props" @change="props.onChange" />
    <template v-slot:numericEditor={props}>
        <TreeListNumericEditor v-bind="props" @change="props.onChange" />
    <template v-slot:dateEditor={props}>
        <TreeListDateEditor v-bind="props" @change="props.onChange" />
    <template v-slot:booleanEditor={props}>
        <TreeListBooleanEditor v-bind="props" @change="props.onChange" />
  1. Define a function for the onItemChange event which will handle the data changes during editing. Inside the event, all relevant data, such as the edited data item, the newly entered value, or the edited field will be available as onItemChange parameters.

    onItemChange (event) {
        const field = event.field;
        this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
            item.id === event.dataItem.id
                ? extendDataItem(item, this.subItemsField, {
                    [field]: event.value,
                : item

In this article

Not finding the help you need?