Editing Basics

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

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.

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.

   Copy Code<TreeList
       :editField="editField"
       :dataItems="processedData"

   Copy CodeeditField: "inEdit"

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

   Copy Codecomputed: {
       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.

   Copy Codecolumns: [
       {
           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.

Copy Code```
<TreeList>
    <template v-slot:textEditor={props}>
        <TreeListTextEditor v-bind="props" @change="props.onChange" />
    </template>
    <template v-slot:numericEditor={props}>
        <TreeListNumericEditor v-bind="props" @change="props.onChange" />
    </template>
    <template v-slot:dateEditor={props}>
        <TreeListDateEditor v-bind="props" @change="props.onChange" />
    </template>
    <template v-slot:booleanEditor={props}>
        <TreeListBooleanEditor v-bind="props" @change="props.onChange" />
    </template>
    ...
```

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.

   Copy Code<TreeList
       @itemchange="onItemChange"
       ..........

   Copy CodeonItemChange (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
           );
   }

Suggested Links

• API Reference of the TreeList
• API Index of the TreeList