I'm facing an issue where I have properties on my objects that contain a datetime, with a specific time. When I try to filter on these columns in the grid they wont be matched properly since the date used for filtering has the time set to 00:00:00. Is there a prop or option to pass the column somehow, to make sure that time is also being taken into the filtering process?
Thanks!
2 Answers, 1 is accepted
Rank 1
So I managed to get this working with at custom filterCell with at DatePicker component. The issue now is that I need the filter chooser dropdown that you usually get when having filtering enabled for a column.
How do I get that menu in my custom filter cell? The menu where you choose "Equals, After, Before" and so on..
Here is the filter chooser dropdown:
<DropDownList className="k-dropdown-operator" iconClassName="k-i-filter k-icon" popupSettings={{ width: '' }}/>However, I think it will be much easier to use the build-in datetime filter (https://www.telerik.com/kendo-react-ui/components/grid/filtering/). You should handle onFilterChange or onDataStateChange event, loop through the filters collection and replace the filter which value is a datetime object and operator Is equal to "eq" or Is not equal to "neq". You can replace it with two new filters, which will have operators 'greater than' and 'less than', pointing the start and end of day that you filter, or a single filter with a function for an operator. This customization of the FilterDescriptor should be used for the filtering only and the original filter should be passed to the Grid. The FilterDescriptor API can be found here: https://www.telerik.com/kendo-react-ui/components/dataquery/api/FilterDescriptor/.
Regards,
Nikolay
Progress Telerik
Rank 4
Bronze
Iron
Iron
How can I use the built-in filter="date" within the columnMenu?
Hi Janki,
See this example - https://stackblitz.com/edit/react-b4asyi?file=app%2Fmain.jsx. I just set filter="date" to the date column.
Regards,Nikolay
Progress Telerik
Rank 1
Iron
Iron
Hi Nikolay.
I have the same problem I use ColumnMenu for filter and for the date field I use filterUI props and send the DateTimePicker Component, but how I can choose the operator? how to implement the DropDownList you mentioned above to do that?
Hi Daniel,
As I understood, you need to replace the DatePicker with the DateTimePicker component. Here how it can be done - https://stackblitz.com/edit/react-4xbj95?file=app%2Fmain.jsx.
I hope that helps.
Regards,Nikolay
Progress Telerik
Rank 1
Iron
Iron
Hi Daniel,
Set the DateTimePicker show prop to `true` and once you are ready with the styling, remove it.
Regards,Nikolay
Progress Telerik