Telerik Kendo React Grid嵌套表格事件冒泡携带错误元数据问题

问题描述 #

在Telerik Kendo React Grid的详情行中嵌入另一个表格（通过detailRow={MyCoponentWithAnotherGrid}配置），点击内部表格的行时，外部表格会触发onSelectionChange事件。虽然事件冒泡属于正常行为，但外部表格事件的endRowIndex属性携带的是内部表格行的索引，调用getSelectedState方法时，外部表格会选中与内部表格点击行索引一致的条目（例如点击内部Item 1.2，外部会选中Item 2）。

是否为Bug？ #

这属于Kendo React Grid的设计缺陷，可认定为Bug。嵌套表格场景下，组件未正确区分事件源所属的表格，导致内部表格的行索引被错误传递给外部表格的选中逻辑，完全不符合预期交互。建议通过Telerik官方渠道提交该Bug反馈。

临时解决方案：阻止事件冒泡 #

可以通过阻止事件冒泡作为临时修复方案，在内部表格的行交互事件中切断事件向外部表格的传递。

实现示例 #

在内部表格的onRowClick或onSelectionChange事件中调用stopPropagation()：

const InnerGridComponent = () => {
  const handleInnerRowClick = (e) => {
    // 阻止事件冒泡至外部表格
    e.stopPropagation();
    // 内部表格行点击的业务逻辑
  };

  return (
    <Grid
      data={innerDataSource}
      onRowClick={handleInnerRowClick}
      // 其他内部表格配置
    />
  );
};

如果内部表格也用到了选中功能，同样可以在其onSelectionChange事件中执行e.stopPropagation()，确保外部表格不会接收到错误的选中触发信号。

内容的提问来源于stack exchange，提问作者Adrian Stanisławski