reactjs - KendoReact 网格复选框过滤器

Question

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>

列菜单：

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