Hello,
I recently have a project that it's necessary to have a filter menu with popup in grid.
I then found this very helpful example here et got it work with fields like string, number
But, I could not have a filter with date ! taking this example : https://cd7bdu.run.stackblitz.io/, I would like having something like these in the filter menu :
- [ ] check all
- [ ] 9/20/1996
- [ ] 8/12/1996
- ...
By the way, I also need to have a checkAll checkbox in order to select all the element (please see attachment).
Could you please have any suggestion for theses problems ?
Thanks in advance for your help,
Best regards,
Yen DO
4 Answers, 1 is accepted
The mentioned documentation example is working as expected with Date objects too, however all involved dates (both the ones in the Grid data, and the ones in the custom multicheckbox filter component) should be valid JavaScript Date objects for the filtering (and other Grid functionalities) to be working as expected:
https://stackblitz.com/edit/angular-i46bxy?file=app/app.component.ts
Adding a select/deselect all functionality is a subject to additional custom implementation. You can find a sample implementation of adding a custom select all functionality to the Kendo UI for Angular MultiSelect component that might point you in the right direction:
http://next.plnkr.co/edit/bJOkT6BXvgvudA788Su0?p=preview&preview
You can also use the customized MultiSelect component as opposed to the custom multicheck filter component from the first example. Here is a runnable demo that demonstrates using MultiSelect as Grid filtering UI:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-customizing-filter-menus
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
Thank you for your answer and suggestion !
I'll take a look at the MultiSelect component to implement the checkbox SelectAll.
For the filtering, sorry it was not clear in my last post. I did convert date to JS date already and I got the problem when trying to display Date objects in the multicheckbox with the same format as the grid. For example, I would like to have :
- [ ] 9/20/1996
- [ ] 8/12/1996
-...
instead of :
- [] Fri Sep 20 1996 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
- [] Mon Aug 12 1996 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
- ...
Actually, if we change the culture info from en to fr (it's a multi language application), we'll get : 20/06/2019 displayed in grid automatically. That's why I would like to use the same format, if not I guess that the filter date may not work correctly or may be broken ?!
Thanks in advance,
Best regards,
Yen
The Grid column format option will handle formatting the dates appropriately, but some custom logic will be required to use the same formatting in the custom reusable filter menu component. You can use either the built-in Angular date pipe, or the Kendo UI date pipe or formatDate method to format the dates accordingly, e.g.:
https://stackblitz.com/edit/angular-i46bxy-zwvuz5?file=app/multicheck-filter.component.ts
On a side note, the format that will be used for displaying purposes does not affect the Grid filtering logic and functionality - the actual Date object value will be used for filtering purposes, while the formatted string representing this date value will only be rendered in the Grid or filtering menu UI, but is not supposed to interfere with the actual processing of the data during filtering - the date-field value of each data item (that holds a Date object value) will be compared to the FilterDescriptor value (that holds such a Date object too).
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
Thanks a lot for your help. It worked fine now.
Have a nice day,
Best regards,
Yen
PS: For information, the fonction distinct from '@progress/kendo-data-query' v 1.4.1 doesn't work well when filtering js date because the result contains all the elements of the column. By the way, the version online v 1.5.0 works fine.