Kendo UI for Vue中row-render与rowclick共存时rowclick失效求助

问题原因 #

当使用row-render自定义网格行时，Grid默认的rowclick事件绑定会失效——因为自定义行完全替换了Grid原生的行元素结构，原生事件绑定没有被继承到自定义行上。而cellclick事件不受影响，是因为它绑定在单元格级别，自定义单元格通常会保留必要的DOM结构。

解决方案 #

直接在自定义行组件内部绑定点击事件，通过组件props获取当前行的dataItem，同时过滤掉输入框、按钮等不需要触发行选中的交互元素。这种方式不需要依赖Grid原生的rowclick事件，完全由自定义行控制事件触发逻辑。

自定义行组件示例 #

<template>
  <tr @click="handleRowClick">
    <!-- 根据列配置渲染自定义单元格 -->
    <td v-for="column in columns" :key="column.field">
      <!-- 这里可以写自定义单元格内容，比如插槽或自定义渲染逻辑 -->
      {{ dataItem[column.field] }}
    </td>
  </tr>
</template>

<script>
export default {
  props: {
    dataItem: {
      type: Object,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleRowClick(event) {
      const target = event.target;
      // 排除输入框、按钮及其父元素
      const isInteractiveElement = target.tagName === 'INPUT' 
        || target.tagName === 'BUTTON' 
        || target.closest('input, button');
      
      if (!isInteractiveElement) {
        // 向父组件触发行选中事件，直接传递props中的dataItem
        this.$emit('row-selected', this.dataItem);
      }
    }
  }
}
</script>

父组件中使用自定义行 #

<template>
  <kendo-grid
    :data-source="gridData"
    :columns="gridColumns"
    :row-render="CustomRow"
    @row-selected="onRowSelected"
  >
  </kendo-grid>
</template>

<script>
import CustomRow from './CustomRow.vue';

export default {
  components: {
    CustomRow
  },
  data() {
    return {
      gridData: [/* 你的数据源 */],
      gridColumns: [/* 你的列配置 */]
    }
  },
  methods: {
    onRowSelected(selectedItem) {
      console.log('选中的行数据:', selectedItem);
      // 这里处理你的行选中逻辑
    }
  }
}
</script>

对原有代码的优化说明 #

你之前的代码依赖Grid原生rowclick事件的event.dataItem，但自定义行后该事件不会触发。改用上述方案后：

• 不需要依赖原生事件的event对象，直接通过组件props获取dataItem，避免了修改event.dataItem的需求
• 点击事件逻辑完全可控，能更精准地过滤不需要触发行选中的元素

内容的提问来源于stack exchange，提问作者Swan