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

Question

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

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, 0.32)"
 };
 const field = props.field || '';
 return <td style={style}>
    {props.dataItem[field]}
    </td>;
};

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

Answer 1

H 彼得，

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

具体来说，我指的是函数中的这一行。它仅返回带有字段名称的

<td>

，它放弃了元素的其余属性。

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

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

进一步指导

正如我在 Twitter 回复中提到的，您可以从这里获得 Kendo 工程师的指导来帮助您。

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

Answer 2

在 TypeScript 中，这对我在 ReactKendo Grid 中有用

const MyDataCustomCell = (props: GridCustomCellProps) => (
    <CustomCell {...props} color="skyblue" />
  );

尝试自定义日期显示，这在 Typescript 中有效，尽管它基于其他一些在 Typescript 中给出错误的示例，但这完全有效

const StringDateCell = ( props: GridCustomCellProps ) => { 
    const field = props.field || '';
    const value = props.dataItem[field];
    const [year, month, day] = value.split('T')[0].split('-');
    const time_part = value.split('T')[1];
  
    return (
          <td>
              {`${year}/${month}/${day}`}
          </td>
      )
  }

并在列中调用分配给单元格