# Inline Edit Mode

The Kendo UI for Vue TreeList provides options for CRUD(create, read, update and delete) operation over the data it displays.

The current article covers more details about the implementation of the `Inline` editing mode. With this editing approach, the TreeList enters in edit mode when the user click on an `Edit` button in the row which data should be edited.

## Inline Edit Mode Configuration

The below example demonstrates how we can configure the TreeList to work in `Inline` edit mode.

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

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

1. Set the field which will indicate the editable data items by using the [`editField`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#editfield) property. This field is part of the temporary data items which are used during editing.

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

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

2. Configure the command column by defining a custom component(see the `CommandCell.vue` file) and import it through a slot template.
   ```jsx
   <template #commandCell="{props}">
     <CommandCell :data-item="props.dataItem"
             :editField="editField"
             @edit="enterEdit"
             @save="save"
             @remove="remove"
             @cancel="cancel"
             @addchild="addChild"/>
   </template>
   ```

3. Set the [`editCell`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#editcell) and [`cell`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#cell) properties for the different columns.

   ```jsx
   columns: [
   {
       field: "name",
       title: "Name",
       width: "280px",
       editCell: 'textEditor',
       expandable: true,
   },
   {
       field: "position",
       title: "Position",
       width: "260px",
       editCell: 'textEditor',
   },
   {
       field: "fullTime",
       title: "Full Time",
       width: "160px",
       editCell: 'booleanEditor',
   },
   {
       cell: 'commandCell',
       width: "360px",
   },
   ]
   ```

4. Define a function for the [`onItemChange`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#onitemchange) event which will handle any input 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
           );
   }
   ```

5. Define the functions which will set the item in edit mode and create a new item in edit mode. You can call these functions from the command buttons in the command cell.

   ```jsx
   enterEdit (dataItem) {
       this.inEdit = [...this.inEdit, extendDataItem(dataItem, this.subItemsField)];
   }
   ```

   ```jsx
   addRecord () {
       const newRecord = this.createNewItem();

       this.dataItems = [newRecord, ...this.dataItems];
       this.inEdit = [...this.inEdit, { ...newRecord }];
   }
   ```

6. Define the functions which will handle the `save`, `cancel`, `remove`, and `addChild` actions. You can call these functions from the command buttons, the toolbar template, or a button which is outside of the TreeList.

   ```jsx
   save (dataItem) {
       const { isNew, inEdit, ...itemToSave } = dataItem;

       this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
           item.id === itemToSave.id ? itemToSave : item
           );
       this.inEdit = this.inEdit.filter((i) => i.id !== itemToSave.id);
   },
   ```

   ```jsx
   cancel (editedItem) {
     if (editedItem.isNew) {
       return this.remove(editedItem);
     }

     this.dataItems = mapTree(this.dataItems, this.subItemsField, (item) =>
         item.id === editedItem.id ? this.inEdit.find((i) => i.id === item.id) : item
       );
     this.inEdit = this.inEdit.filter((i) => i.id !== editedItem.id);
   }
   ```

   ```jsx
   remove (dataItem) {
       this.dataItems = removeItems(this.dataItems, this.subItemsField, (i) => i.id === dataItem.id);
       this.inEdit = this.inEdit.filter((i) => i.id !== dataItem.id);
   }
   ```

   ```jsx
   addChild (dataItem) {
     const newRecord = this.createNewItem();
     this.inEdit = [...this.inEdit, newRecord];
     this.expanded = [...this.expanded, dataItem.id];
     this.dataItems = modifySubItems(
         this.dataItems,
         this.subItemsField,
         (item) => item.id === dataItem.id,
         (subItems) => [newRecord, ...subItems]
       );
   }
   ```

## Suggested Links

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