New to Kendo UI for Vue? Start a free 30-day trial

In-Cell Edit Mode

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

Change Theme

Theme

Loading ...

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

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"
```

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-caret-alt-right") ||
      targetClasses.contains("k-i-caret-alt-down"))
  ) {
    return;
  }

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

Set the 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',
      },
]

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

In-Cell Edit Mode

In-Cell Edit Mode Configuration

Suggested Links