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

Date Filter and binding is not working

5 Answers 730 Views

Grid

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

Vijay asked on 31 Mar 2020, 06:14 PM

Hello

We have tried to bind the data and add the filters for date columns and its not working as expected. Our Datasoure returns the following Json Results, after calling the Process Method, its takes the following values and not binding property. If we take json data data and add it in .ts file, its binding properly and filter is not working.

{data: "[{"DonorNa", total: 13489}
data: "[{"DonorNa"
total: 13489
__proto__: Object

this.gridData = process(this.gData, this.state);

5 Answers, 1 is accepted

answered on 02 Apr 2020, 08:21 AM

Hello Vijay,

The built-in Grid functionalities like formatting, filtering, sorting, grouping, and editing, need the Grid data to contain actual JavaScript Date objects (not some string date representations) in order to be working as expected:

https://www.telerik.com/kendo-angular-ui/components/grid/troubleshooting/#toc-troubleshooting

When the data contains strings, they will be processed as such, yielding unexpected results. Furthermore, the built-in Grid date filtering UI is the DatePicker component whose value can be a JavaScript date object only, thus comparing the value of the DatePicker to a string value will not yield a valid result.

Mapping the incoming data such that JavaScript Date objects are produced from the string date representations is the most straight-forward approach to ensure that the Grid is dealing with the dates properly.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 06 Apr 2020, 09:23 AM

Hi Vijay,

I created an example using the provided dataset, mapped so that the items contain JavaScript Date objects, and it seems to be working as expected:

https://stackblitz.com/edit/angular-nqnxvj?file=app/products.ts

Note that the respective Grid column filter input is set to "date" so that the default UI for filtering dates is used. Also, in the dataStateChange event the state is updated, and the data is processed accordingly.

Further details about Grid data binding and filtering are available in the following sections of our documentation:

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

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/

Please compare it to your implementation, and apply the necessary adjustments. If the issue persists, we will need a similar isolated runnable project where it can be observed, so we can inspect it, determine what is causing it, and try to suggest a solution that is most suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

answered on 07 Apr 2020, 02:59 AM

filter1496aa508c6574947a98a8ba8c6dcb08d.png

filter23ae6f6c3a9f54b78bee0a6e2632cfb24.png

The filter is not working in the stackblitz. I entered 9/9/2019 and changed the filter option to Is Equal to, its not showing up any value.

Attached the screen shot for your reference.

answered on 08 Apr 2020, 08:06 AM

Hi Vijay,

The filter is working as expected - when two dates are compared, their time part counts too, and the date April 8th, 2020, 2 PM is different than the date April 8th, 2020, 4PM. When a date is selected from the DatePicker, it is created with 0 time part - midnight of the selected date.

Thus to match date-times for the whole day where the hour portion of the date can be from 0 to 23, the used filter should be "later than or equals this day AND is before the next day", for example:

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

https://stackblitz.com/edit/angular-nqnxvj-w1rf4e?file=app/app.component.ts

Alternatively, the developer can modify the incoming filter object in the dataStateChange event in accordance with their needs, for example if a filter descriptor by the date field comes, and its operator is "eq", replace it with a composite descriptor with logic "and", and filters as described above = 'gte' the incoming date and 'lt' the next date, for example:

{
  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'
}

Regards,
Dimiter Topalov
Progress Telerik