如何让 KendoUI Grid 使用自定义单元格渲染器和选择

问题描述

似乎选择事件没有通过自定义单元格渲染器传递。我的目标是我想更改网格中每个单元格的背景颜色（基于值），并且还能够处理选择事件。我在这里修改了文档中的示例：

https://www.telerik.com/kendo-react-ui/components/grid/selection/

在“订单数量”列中包含背景颜色。您会注意到该列不参与选择。我在这里创建了一个 stackblitz 示例：

https://stackblitz.com/edit/react-o4ycqi?file=app/main.jsx

我所做的只是添加了一个 cellWithBackground 函数并将其分配给 UnitsInStock 列。这是那个函数

const cellWithBackGround = props => {
 const examplePrice = true;
 const style = {
   backgroundColor: "rgb(243,23,0.32)"
 };
 const field = props.field || '';
 return <td style={style}>
    {props.dataItem[field]}
    </td>;
};

我确实找到了一个很接近的示例，但我无法让它与功能组件一起工作。它只适用于我不使用的类。因此，请提供有关支持功能组件的示例或参考。

解决方法

彼得，

感谢您分享代码。通过完全替换整个单元的基础设施，它将不再响应来自网格的任何内容。

具体来说，我指的是函数中的这一行。它只返回带有字段名称的 <td>，它放弃元素的其余属性。

//cell returned form the function
return <td style={style}>
    {props.dataItem[field]}
    </td>;

那时，它基本上是一个死细胞。它不会响应事件、数据操作等，因为它缺少网格与其交互所需的所有部分。

进一步指导

正如我在Twitter reply中提到的，您可以从这里获得剑道工程师的指导以帮助您。

我认为通过使用样式而不是直接手动处理 DOM 元素有更好的方法来处理这个问题。至少，您需要归还单元的完整基础设施，他们可以提供帮助。