# Editing Basics

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

<CtaPanelOverview></CtaPanelOverview>

## Getting Started

The TreeList provides the following editing modes:

* [Basic edit mode](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/editing#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](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/editing/editing-inline) - 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](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/editing/editing-in-cell) - 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](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/editing/editing-external-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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treelist/editing-row-click/source.txt)

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

1. Set the [`editField`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#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.

   ```jsx
   <TreeList
       :editField="editField"
       :dataItems="processedData"
   ```

   ```jsx
   editField: "inEdit"
   ```

2. Create a data tree computed property that holds the edit state of each TreeList data item by using the [`mapTree`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/maptree) function.

   ```jsx
   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`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#editcell) property for each TreeList column.

   ```jsx
   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`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelisttexteditorprops), [`TreeListNumericEditor`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistnumericeditorprops),[`TreeListDateEditor`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistdateeditorprops), and [`TreeListBooleanEditor`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistbooleaneditorprops).

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

1. Define a function for the [`onItemChange`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistitemchangeevent) parameters.

   ```jsx
   <TreeList
       @itemchange="onItemChange"
       ..........
   ```

   ```jsx
   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
           );
   }
   ```

## Suggested Links

* [API Reference of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops)
* [API Index of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api)