v

# In-Cell Edit Mode

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

## In-Cell Edit Mode Configuration

The following example demonstrates how to implement the in-cell editing mode in the Kendo UI for Vue TreeList.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treelist/editing-in-cell/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. Define the implementation that will change the mode of a clicked cell to `in edit`.

   ```jsx
   handleCellClick(event) {
     const targetClasses = event.event.target.classList;

     if (
       targetClasses &&
       (targetClasses.contains("k-i-chevron-right") ||
         targetClasses.contains("k-i-chevron-down"))
     ) {
       return;
     }

     this.enterEdit(event.dataItem, event.field);
   }
   ```

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

   ```jsx
   initColumns: [
         {
           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 methods that handle the different row events
   ```jsx
   handleRowMousedown() {
     this.preventExit = true;
       clearTimeout(this.preventExitTimeout);
       this.preventExitTimeout = setTimeout(() => {
         this.preventExit = undefined;
       });
   },
   handleRowBlur() {
       clearTimeout(this.blurTimeout);

       if (!this.preventExit) {
         this.blurTimeout = setTimeout(() => {
           this.exitEdit();
         });
       }
     },
   handleRowFocus() {
     clearTimeout(this.blurTimeout);
   },
   ```

## 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)