Grid date filter not working

[Carla]

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

 

[elia]

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]

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.

[Dimiter Topalov]

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

[n/a]

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]

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

[Jan]

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