Grid date filter not working

3 Answers 4283 Views
General Discussions
Carla
Top achievements
Rank 1
Veteran
Carla asked on 20 Sep 2018, 01:47 AM

Hi,

I am grabbing my data with the grid built-in directive and all filters work fine except for the date filter.

My grid template looks something like this:

<kendo-grid
[kendoGridBinding]="data | async"
[height]="800"
[pageSize]="15"
[sortable]="true"
[pageable]="true"
[filterable]="true"
[scrollable]="true"
[resizable]="true"
>
<kendo-grid-column [hidden]="true" field="ID" title="ID" [width]="10"></kendo-grid-column>

<kendo-grid-column field="SCHEDULED_DATE" title="Scheduled Date" [width]="120" filter="date" format="{0:d}"
[headerStyle]="{'line-height': '1.5em', 'font-size':'13px', 'text-overflow': 'clip', 'overflow': 'visible',
'white-space': 'normal', 'line-height': 'normal', 'text-align': 'center'}">
</kendo-grid-column>

 

My returned data is in json and the query to get looks like this:

select id, to_char(sched_dt,'MM/DD/YYYY') as scheduled_date from tasks_table;

 

How can I make it to work?

Thanks,

Carla

 

3 Answers, 1 is accepted

Sort by
1
fazal
Top achievements
Rank 1
Iron
answered on 18 Jun 2021, 10:54 AM

client side date filter is not working for "is equal to" , is their any way to filter date only

Other filtering options are working except is equal to" plz help will be appreciated

here are the snap shots attached bellow

The Record with the date 19/04/2021 is available in the grid as shown in above snapshot

but after filtering as shown in bellow snapshot

here are my code snap shot as shown

Thanks in advance

Dimiter Topalov
Telerik team
commented on 21 Jun 2021, 03:14 PM

Hello Fazal,

Comparing dates with "equals" will always compare the whole date (including the time part). Using a Filter Menu and filtering by "Is after or equal to" and "Is before" the next day should return the expected values for the respective day.

There are several approaches to achieve the desired behavior that come to mind, depending on the scenario requirements:

1) The developer can map the data such that there are two properties - one with the original date (with time), and one with the trimmed time - this way the Grid column can be bound to the trimmed date field for filtering purposes, but the non-trimmed date can be displayed via the cell templates

2) Use the built-in filter menu or the filter cell template to filter by range

3) Use some custom logic in the filterChange/dataStateChange event handler to modify the incoming date filter and change it into a composite filter descriptor with operators gte and lt, and logic "and", e.g.:

{
  filters: [{field: 'dateField', operator: 'gte', value: the-incoming-filter-date-value}, {field: 'dateField', operator: 'lt', value: the-incoming-filter-date-value + 1 day}], logic: 'and'
}

I hope this helps.

0
Dimiter Topalov
Telerik team
answered on 21 Sep 2018, 05:50 AM
Hi Carla,

The data the Grid is bound to need to contain actual JavaScript Date objects (as opposed to string representations) for the built-in formatting, sorting, filtering and editing functionalities to work as expected:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/#toc-getting-started

You can inspect the examples on filtering where the filter type is set to "date" and filtering is working as expected:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/#toc-filter-row

The most straight-forward approach to resolve the described issue will be to map the data such that all date fields represent actual JavaScript dates, e.g.:

https://stackblitz.com/edit/angular-jqahit-yahi79?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
n/a
Top achievements
Rank 1
commented on 05 Aug 2020, 04:32 PM

Hi Dimiter,

I have a requirement where the user would like to filter on Date (without time). So they would like to say, show me the grid records where date = 8/4/2020. But behind the scenes the grid column must be a javascript date object which includes the time. Even when I try to pre-process the date, truncate the fields to 12:00:00AM, javascript will convert the date to a timezone offset from GMT. See below.

 

new Date((new Date()).toISOString().split('T')[0])

console output:

Tue Aug 04 2020 18:00:00 GMT-0600 (Mountain Daylight Time)

 

How do I support a Date (without time) equal to filter with the kendo-grid-column?

 

I thought i had a solution by adding a datetime format to the column and then the filter would force the user to specify a time in the equals filter. But, the stakeholders do not like this. They want to select a date 8/04/2020 in the equals filter and then show all records for that date.

Do you have any solutions for me?

Dimiter Topalov
Telerik team
commented on 07 Aug 2020, 07:49 AM

Hello,

Comparing dates with "equals" will always compare the whole date (including the time part). Filtering by "Is after or equal to" and "Is before" the next day should return the expected values for the respective day. There are several approaches to achieve the desired behavior that come to mind, depending on the scenario requirements:

1) You can map the data such that there are two properties - one with the original date (with time), and one with the trimmed time - this way you can bind the Grid column to the trimmed date field for filtering purposes, but display the non-trimmed date via the cell templates

2) Use the built-in filter menu or the filter cell template to filter by range

3) Use some custom logic in the filterChange/dataStateChange event handler to modify the incoming date filter and change it into a composite filter descriptor with operators gte and lt, and logic "and", e.g.:

{
  filters: [{field: 'dateField', operator: 'gte', value: the-incoming-filter-date-value}, {field: 'dateField', operator: 'lt', value: the-incoming-filter-date-value + 1 day}], logic: 'and'
}

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

0
Jan
Top achievements
Rank 1
Iron
answered on 21 Dec 2021, 11:45 AM

We need dd/MM/yyyy format in date filter, but when I select date in DOB it filters data correctly but date is not appearing in filter text box.

by default date format is day/month/ year.

code is as below, any assistance please, 

Thanks in advance 

Tags
General Discussions
Asked by
Carla
Top achievements
Rank 1
Veteran
Answers by
fazal
Top achievements
Rank 1
Iron
Dimiter Topalov
Telerik team
Jan
Top achievements
Rank 1
Iron
Share this question
or