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.

Change Theme

Theme

Loading ...

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.

   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 and 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 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.

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