KendoReact网格复选框过滤器

如何解决KendoReact网格复选框过滤器

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

网格：

<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>

ColumnMenu：

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>
        );
    }
}

解决方法

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

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>
    );
}