I’m working on integation a vue.js appliaction with kendo UI treelist component,Where each grid cell inside the treelist should be ediatble inlibe however setting up the ‘editable=”Inlie”‘ property and handling events like @cellclick and @datachange the cell remains non-ediatble.
But on cell click my function are fired.

Setting ‘editable=”Inline”‘ : I’ve set the editable=”Inline” attirbute on the kendo grid componet, expectiong cell to beacome editable when clicked

<template>
  <div>
    <TreeList
      :style="treeListStyles"
      :tableProps="{ style: { tableLayout: 'fixed' } }"
      :dataItems="processedData"
      :subItemsField="subItemsField"
      :expand-field="'expanded'"
      @expandchange="onExpandChange"
      :columns="columns"
    >
      <template v-slot:setupCellTemplate="{ props }">
        <td>
          <template v-if="props.dataItem.type === 'grid'">
            <kendo-grid
              @cellclick="cellClick"
              @dataChange="onDataChange"
              :editField="'inEdit'"
              :data-items="filteredProperties(props.dataItem.properties)"
              :key="props.dataItem.id"
              editable="inline"
            >
              <template
                v-for="(column, index) in getGridColumns(props.dataItem.properties)"
                :key="index"
              >
                <kendo-grid-column
                  :field="column.name"
                  :title="column.label"
                  :editor="'text'"
                ></kendo-grid-column>
              </template>
            </kendo-grid>
          </template>
        </td>
      </template>
    </TreeList>
  </div>
</template>

<script>
import { TreeList } from '@progress/kendo-vue-treelist'
import { Grid } from '@progress/kendo-vue-grid'
import { data } from './play'

export default {
  name: 'TreeListWithGrid',
  components: {
    TreeList,
    'kendo-grid': Grid,
  },
  data() {
    return {
      subItemsField: 'properties',
      expandField: 'expanded',
      treelistData: data,
      initColumns: [
        {
          field: 'name',
          title: 'Name',
          width: '300px',
          expandable: true
        },
        {
          field: 'properties',
          title: 'Details',
          cell: 'setupCellTemplate'
        }
      ]
    }
  },
  methods: {
    onExpandChange(e) {
      const dataItem = e.dataItem
      if (dataItem.type !== 'grid') {
        dataItem.expanded = !dataItem.expanded
        this.treelistData = [...this.treelistData]
      }
    },
    filteredProperties(properties) {
      if (!properties || properties.length === 0) return []
      const keyValuePairs = {}
      properties.forEach((prop) => {
        keyValuePairs[prop.label] = prop.value
      })
      return [keyValuePairs]
    },
    getGridColumns(properties) {
      if (properties.length > 0) {
        return properties.map((prop) => ({
          name: prop.name,
          label: prop.label
        }))
      }
      return []
    },
    onDataChange(event) {
      const { dataItem, field, value } = event
      dataItem[field] = value
      this.treelistData = [...this.treelistData]
    },
    cellClick(event) {
      alert('YOLo') // Debugging line
      const { dataItem, field } = event
      if (dataItem.inEdit && dataItem.inEdit === field) return

      this.exitEdit(dataItem)
      dataItem.inEdit = field
      this.treelistData = [...this.treelistData]
    },
    exitEdit(dataItem) {
      if (dataItem.inEdit) {
        dataItem.inEdit = undefined
        this.treelistData = [...this.treelistData]
      }
    }
  },
  computed: {
    treeListStyles() {
      return {
        maxHeight: `calc(100vh - 44px)`,
        overflow: 'auto'
      }
    },
    columns() {
      return this.initColumns.map((column) => ({ ...column }))
    },
    processedData() {
      return this.treelistData
    }
  }
}
</script>