This is a migrated thread and some comments may be shown as answers.

Date filter Kendo React UI Grid

6 Answers 2268 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Arun
Top achievements
Rank 1
Arun asked on 16 Mar 2019, 02:20 PM

Hi, I have a table with dates in a column. I am tryig to filter on the dates but it isnt working.

 

Please advise.

 

StackBlitz Link: https://stackblitz.com/edit/react-kmvmur?file=app/main.js

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Mar 2019, 06:20 AM
Hello, Arun,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Arun
Top achievements
Rank 1
answered on 20 Mar 2019, 12:08 PM
Thanks Stefan. The example you provided doesnt seem to work. I selected date 3/7/2019 and it returns me 'No records' even though there is atleast one record. Please advice.
0
Stefan
Telerik team
answered on 21 Mar 2019, 07:05 AM
Hello, Arun,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Daniel
Top achievements
Rank 1
Iron
Iron
commented on 15 Jun 2022, 06:46 AM

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?

Konstantin Dikov
Telerik team
commented on 17 Jun 2022, 03:31 AM

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:

0
IT Dept
Top achievements
Rank 1
answered on 06 Sep 2019, 03:31 PM

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.

0
Stefan
Telerik team
answered on 09 Sep 2019, 06:52 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Brad
Top achievements
Rank 1
answered on 19 Nov 2019, 10:26 PM
Thanks all. This helped me solve the issue I was having filtering date/time in Grid columns. Created a custom date range filter triggered in onDataStateChange that would override the date filter object in the filters array i.e {field: selectedDate, operator: eq, value: moment(value).toDate()} with 2 objects for the range ala {field: selectedDate, operator: gte, value: moment(value).startOf('day').toDate()}, {field: selectedDate, operator: lt, value: moment(value).endOf('day').toDate()}. Works like a charm.
yawiv
Top achievements
Rank 1
commented on 26 Apr 2022, 05:50 AM

How did you managed to clear the filter then ??? and also after applying the filter as you have used 'gte' first, it will show 'greater than' filter as active not the equal to. Any workaround for that ???
Konstantin Dikov
Telerik team
commented on 26 Apr 2022, 10:24 AM

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.

Tags
General Discussions
Asked by
Arun
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Arun
Top achievements
Rank 1
IT Dept
Top achievements
Rank 1
Brad
Top achievements
Rank 1
Share this question
or