6 Answers, 1 is accepted
The issue occurs because the filter is trying to filter a numeric value using the date return from the filter cell.
In these cases, we suggest parsing the data which is passed to the Grid initially. This will ensure that the data passed to the Grid has valid date objects which can be successfully filtered.
It will also remove the need of custom cell for the date formats, as it will be able to use the built-in format option:
https://stackblitz.com/edit/react-kmvmur-wwwvk2?file=app/main.js
Regards,
Stefan
Progress Telerik
Rank 1
This occurs because the date that is created from number has time part as well. The date that is picked from the filter is with time 00:00 which is not equal to the same date with different time:
If dates with time part have to be filtered, I can suggest using a custom filter component and adding our new DateTimePicker component:
https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/datetimepicker/
https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cell
Regards,
Stefan
Progress Telerik
Rank 1
Iron
Iron
Hi, Stefan.
I am facing now the same issue but do not understand from the docs how can I remove the time part from the filter.
can you help me with that, please?
Hi Daniel,
For the "equal" operator you need to implement custom filter operator or clear the time part of the Date object in the dataItems prior to binding them to the Grid and also, clear the time part for the filter value (https://stackoverflow.com/questions/2698725/comparing-date-part-only-without-comparing-time-in-javascript). For the second approach you can map the items prior to passing the data to the Grid and you can clear the time part with the "onDataStateChange" or "onFilterChange" events (depending which approach you are using).
As for the first approach with a custom operator, which gives you more control, I have create a simple example demonstrating such implementation:
Rank 1
Stefan, if there was a way to specify two filter rules instead of just one for the custom filter cell, then one could easily create a custom filter cell that looked for datetimes between Date and Date+1. The DateTime picker appears to be useless, as to use it in Equals mode you would need to know the timestamp to the millisecond which is not plausible for users, or for showing all results on a single date.
I see from the types that the CustomFilterCell operator prop can take a string or a Function, but the function is not defined further. What kind of function is this? Can operator be a function that runs on the values to create custom filtering logic? Or is it just a function of the type `() => "contains"` which just has to return a string at the end? Or I'll re-iterate my suggestion that the customFilterCell should return a Filter/CompositeFilter instead of the current shape, allowing complex rules to be created.
Hello, Eric,
Yes, it can accept a function that can be used for custom filtering logic.
Please take a look at how this can be done for numeric values:
https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells (rangeFilterCell.jsx -> inRange function)
Similar logic can be used for Date column.
Regards,
Stefan
Progress Telerik
Rank 1
Rank 1
Hello Yawiv,
If you are facing issues with the customization, you can share a stackblitz example demonstrating the issue, so that we can inspect it locally and see if we can suggest a solution for the problem.
Looking forward to your reply.