如何实现KendoReact Grid列菜单复选框过滤器显示与过滤值分离？

完全可以实现显示名称（本地化文本）与过滤值（数据源原始英文值）分离，确保切换语言后过滤功能正常工作，具体实现方式如下：

• 配置自定义列过滤组件
  在KendoReact Grid的状态列定义中，使用下拉过滤组件并指定显示字段与值字段的映射。给过滤组件提供包含本地化显示文本和原始英文值的选项列表，让过滤逻辑基于原始值执行，而界面显示本地化文本。

  示例代码：

  import { Grid, GridColumn } from '@progress/kendo-react-grid';
  import { DropDownListFilter } from '@progress/kendo-react-grid';
  
  // 根据当前语言生成的本地化状态选项
  const localizedStatusOptions = [
    { text: "已完成", value: "Completed" },
    { text: "进行中", value: "InProgress" },
    { text: "未开始", value: "NotStarted" }
  ];
  
  <Grid data={yourEnglishDataSource}>
    <GridColumn
      field="status"
      title="状态" // 本地化的列标题
      filter="dropdown"
      // 自定义过滤单元格
      filterCell={props => (
        <DropDownListFilter
          {...props}
          data={localizedStatusOptions}
          dataItemTextField="text" // 界面显示的本地化文本字段
          dataItemValueField="value" // 过滤时使用的原始英文值字段
        />
      )}
      // 自定义单元格渲染，显示本地化文本
      cell={props => {
        const matchedOption = localizedStatusOptions.find(opt => opt.value === props.dataItem.status);
        return <td>{matchedOption ? matchedOption.text : props.dataItem.status}</td>;
      }}
    />
    {/* 其他列配置 */}
  </Grid>
  

• 核心逻辑说明
  过滤组件通过dataItemValueField获取原始英文值，与数据源中的status字段直接匹配，因此无论界面显示哪种语言的文本，过滤操作都会基于数据源的原始值执行，保证结果准确。

• 多语言切换适配
  当切换语言时，只需更新localizedStatusOptions中的text字段内容，Grid会自动重新渲染过滤菜单和单元格显示文本，过滤逻辑无需修改，始终保持与数据源的兼容性。

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