Inline Edit Mode

The Kendo UI for Vue Native 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.

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 property. This field is part of the temporary data items which are used during editing.

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

   Copy CodeeditField: "inEdit"

2. Configure the command column by defining a custom component(see the CommandCell.vue file) and import it through a slot template.

   Copy Code<template v-slot:commandCell="{props}">
     <CommandCell :data-item="props.dataItem" 
             :editField="editField"
             @edit="enterEdit"
             @save="save" 
             @remove="remove"
             @cancel="cancel"
             @addchild="addChild"/>
   </template>

3. Set the editCell and cell properties for the different columns.

   Copy Codecolumns: [
   {
       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 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 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
           );
   }

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.

   Copy CodeenterEdit (dataItem) {
       this.inEdit = [...this.inEdit, extendDataItem(dataItem, this.subItemsField)];
   }

   Copy CodeaddRecord () {
       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.

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

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

   Copy Coderemove (dataItem) {
       this.dataItems = removeItems(this.dataItems, this.subItemsField, (i) => i.id === dataItem.id);
       this.inEdit = this.inEdit.filter((i) => i.id !== dataItem.id);
   }

   Copy CodeaddChild (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
• API Reference of the TreeListToolbar
• API Index of the TreeList