KendoReact Grid Checkbox Filter

Question

A GridColumnMenuCheckboxFilter component is included in kendo-react-grid to provide a checkbox list to filter column data. However, the documentation only shows how to use this with hardcoded data. Is it possible to use the Grid component data to populate the checkbox filter instead?

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

Answer 1

Yes you can by passing the data as a prop to the ColumnMenu as per this forum post:

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

Grid:

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