React Kendo Grid : Remove Duplicate Filters

Question

We have one simple read-only React grid, where we have the standard Kendo filters on each column. Though we don't want the duplicate filters.

Grid code

                        sortable
                        pageable={this.state.pageable}                      
                        data={this.state.queuedData}
                        sort={this.state.sort}
                        filter={this.state.filter}
                        onFilterChange={this.handleFilterChange}
                        onSortChange={this.handleSortChange}
                        onPageChange={this.handlePageChange}
                        total={this.state.total}
                        skip={this.state.skip}
                        pageSize={this.state.pageSize}                       
                        resizable>                   
                    <GridColumn field="entity" title="Entity" sortable={true} columnMenu = {ColumnMenu}/>
                    <GridColumn field="name" title="Name"  sortable={true} columnMenu = {ColumnMenu}/>
                    <GridColumn filter="date" field="changedDate" title="Change Date"  sortable={true} 
                    columnMenu = {ColumnMenu}
                    cell={this.CustomCell}/>

ColumnMenu Component code

import React from 'react';
import {
    GridColumnMenuFilter
} from '@progress/kendo-react-grid';

export class ColumnMenu extends React.Component {
    render() {
        return (
            <div>
                <GridColumnMenuFilter {...this.props} expanded={true}/>
            </div>
        );
    }
}

And the outcome is this :

but we want something like this :

Please suggest how it can be possible

Jack Lingwood Jack Lingwood · Accepted Answer · 2020-07-30T14:08:58

1

votes

React Kendo Grid : Remove Duplicate Filters

1 Answers