I am using filterOperators from defining filter for text and numeric field but i don't want to display filter icon due to space constraints.
For example
filterOperators={{
'text': [
{ text: 'grid.filterContainsOperator', operator: 'contains' }
],
'numeric': [
{ text: 'grid.filterEqOperator', operator: 'eq' }
]
}}
My filterOperators has just two values now there is now point displaying dropdown of contains and is equal to. So is there any way that i will not display the dropdown but my string columns gets filter with contain and numeric columns get filter with equal.
Regards,
Mukesh
4 Answers, 1 is accepted
KendoReact Grid allows customization of the filter cells and this can be achieved using custom filter cells
https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells
I have prepared an example that implements your use case in particular:
https://stackblitz.com/edit/react-kbfuck-ygcjqp?file=app/main.jsx
Please reach back to us if you need additional help.
Kind Regards,
Nikola
Progress Telerik
Rank 1
I don't want the clear filter icon, instead i want cross mark which should clear the filter text.
Is there any i can achieve that level of customization.
Rank 1
You can remove the dropdown by CSS.
.k-filtercell-operator {
display: none
}
Add the above code to your global stylesheet if you want to remove the filterIcon globally.
As for needing a x mark to clear the filter, you need to create a custom filter component.
If the end goal is to change the icon for clearing the filter, this can be achieved with CSS or with custom filter render an using one of our icons:
https://www.telerik.com/kendo-react-ui/components/styling/icons/
This is the approach with CSS:
https://stackblitz.com/edit/react-kbfuck-r6ex3d?file=index.html
.k-i-filter-clear::before { content: "\e11b";}Regards,
Stefan
Progress Telerik