如何让KendoUI Grid适配自定义单元格渲染器并支持选择功能

问题根因 #

你自定义单元格渲染器时没有透传Kendo Grid内置传入cell组件的选择事件、相关属性，导致该列单元格无法和Grid的选择逻辑联动。你当前直接返回了全新的<td>元素，仅绑定了自定义样式和文本内容，丢失了Grid原生传入的所有事件监听器和交互相关属性。

函数式组件解决方案 #

直接修改你的自定义单元格渲染函数，透传所有原生props，仅覆写需要自定义的样式即可，修复后代码如下：

const cellWithBackGround = props => {
  // 拆分原生样式和其余属性
  const { style: nativeStyle, ...restProps } = props;
  const customStyle = {
    backgroundColor: "rgb(243, 23, 0, 0.32)",
    // 合并原生样式，避免覆盖Grid内置的单元格样式
    ...nativeStyle
  };
  const field = props.field || '';
  // 透传所有原生属性给td元素，保留内置选择逻辑
  return <td {...restProps} style={customStyle}>
    {props.dataItem[field]}
  </td>;
};

关键说明 #

• Kendo Grid传入自定义cell组件的props中已经内置了选择相关的点击事件监听、选中状态样式控制、无障碍属性等，直接透传即可复用原生选择逻辑
• 样式需要合并原生传入的style属性，避免覆盖Grid内置的对齐、内边距等基础单元格样式

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