We have a basic read-only React grid with standard Kendo filters on each column, but we want to avoid having 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>
);
}
}
The current outcome looks like this :
https://i.sstatic.net/Eoj7N.png
However, we would prefer it to look more like this :
https://i.sstatic.net/TZWQm.png
If you have any suggestions on how we can achieve this, please let us know.