KendoReact网格复选框过滤器

Question

在kendo react网格中包含一个GridColumnMenuCheckboxFilter组件，用于提供一个复选框列表来过滤列数据。但是，文档仅显示如何将其与硬编码数据一起使用。是否可以使用网格组件数据来填充复选框过滤器？

网格：

<Grid
data={this.state.result}
{...this.state.dataState}
onDataStateChange={this.dataStateChange}
sortable={true}
pageable={true}
pageSize={8}
>
<Column field="ProductID" title="Product Id" filter={'numeric'} columnMenu={ColumnMenu}/>
<Column field="ProductName" columnMenu={ColumnMenu}/>
<Column field="Category.CategoryName" columnMenu={ColumnMenu}/>
<Column field="UnitPrice" filter={'numeric'} columnMenu={ColumnMenu} />
<Column field="Discontinued" filter={'boolean'} columnMenu={ColumnMenu} />
</Grid>

列菜单：

import * as React from 'react';
import { GridColumnMenuCheckboxFilter } from '@progress/kendo-react-grid';
import products from './products.json';
export class ColumnMenu extends React.Component {
render() {
return (
<div>
<GridColumnMenuCheckboxFilter {...this.props} data={products} expanded={true} searchBox={()=> null} />
</div>
);
}
}

Answer 1

是的，您可以按照以下论坛帖子将数据作为道具传递到ColumnMenu：

列菜单：

import * as React from 'react';
import {
GridColumnMenuCheckboxFilter
} from '@progress/kendo-react-grid';
export class ColumnMenu extends React.Component {
render() {
return (
<div>
<GridColumnMenuCheckboxFilter {...this.props} data={this.props.data} expanded={true} searchBox={()=> null}/>
</div>
);
}
}

网格：

MyColumnMenu = (props) => <ColumnMenu {...props} data={this.state.result.data}/>
render() {
return (
<Grid
data={this.state.result}
{...this.state.dataState}
onDataStateChange={this.dataStateChange}
sortable={true}
pageable={true}
pageSize={8}
>
<Column field="ProductID" title="Product Id" filter={'numeric'} columnMenu={this.MyColumnMenu}/>
<Column field="ProductName" columnMenu={this.MyColumnMenu}/>
<Column field="Category.CategoryName" columnMenu={this.MyColumnMenu}/>
<Column field="UnitPrice" filter={'numeric'} columnMenu={this.MyColumnMenu} />
<Column field="Discontinued" filter={'boolean'} columnMenu={this.MyColumnMenu} />
</Grid>
);
}