Describe the bug
TreeList doesnt show any items because of crash in error, when you filter TreeList items by Date and 麓Filter structure is array (multiple items) and not flat only one
To Reproduce
https://stackblitz.com/edit/angular-cer4fm?file=app/app.component.ts
1) It works when [filter]="filter"
public filter = {
field: "floorplanUploaded",
operator: "lt",
value: "2020-10-10T23:00:00.000Z"
};
2) Change [filter]="filter2"
public filter2 = {
filters: [
{
field: "floorplanUploaded",
operator: "lt",
value: "2020-10-27T23:00:00.000Z"
}
],
logic: "and"
};

It will not crash with custom datepicker input in custom template (e.g - or just date picker input.. ):
<ng-template
kendoTreeListCellTemplate
let-dataItem
>
{{ dataItem.floorplanUploaded | date: 'M/d/yyyy hh:mm' }}
</ng-template>
<ng-template
kendoTreeListFilterMenuTemplate
let-filter
let-column="column"
let-filterService="filterService"
>
<kendo-grid-date-filter-menu
[column]="column"
[filter]="filter"
[filterService]="filterService"
>
</kendo-grid-date-filter-menu>
</ng-template>
however it will not work anyway and won't show any rows.
In our real application filter is not Hardcoded like in this example - i have created this example filter as normal User interaction with filter menu and just copied value to example. - Date filter creates array with 1 item in filter. So maybe some kind of bug in filterService
Even when i do:
value: new Date("2020-10-27T23:00:00.000Z")
in filter2 (which should not be neccesarry - Treelist filtermenu does use ""2020-10-27T23:00:00.000Z" and not Date instance, it will not crash but still NO data.
Expected behavior
Date filter should work in treelist.
Hi @montella1507,
The observed problems are related to the fact that the TreeList data does not contain valid JavaScript Date objects, but rather string representations of a date:
https://www.telerik.com/kendo-angular-ui/components/treelist/troubleshooting/#dates-are-not-properly-formatted-during-sorting-filtering-or-editing-dates-are-treated-as-strings
The built-in filtering UI for dates is a Kendo DatePicker component that works with JavaScript Date objects only (this the observed JavaScript error).
Using valid JavaScript Date objects both in the TreeList data, and in the filter descriptors, should yield properly working filtering functionality:
https://stackblitz.com/edit/angular-cgoeor-7xnbaw?file=app/app.component.ts
Hi @dtopalov thank you for your response... Could you consider to "auto-parse" data in your component when datetimes are strings? At least when they are ISOstrings...
anyway.. Thank you for your help. Highly appreciated.
BTW: i recommend you to update your example to map() operator and not tap() because it is not side-effect, its mapping - and response may be immutable.
pipe(tap(response =>
response.forEach(item =>
item.HiredDate = new Date(item.HiredDate)
)
)
=>
pipe(
map(response =>
response.map(item =>({
...item,
HiredDate = new Date(item.HiredDate)
})
)
)
```
Hi @montella1507,
Thank you for the suggestion and comments. We will consider updating the TroubleShooting section. As for dates auto-parsing, currently such an enhancement is not in our immediate roadmap, and it would be difficult to assume and handle all possible date formats, especially when different browser support for various formats comes into play. However, if you have the time, please submit a feature request to our Feedback portal for auto-handling specific common Date formats. We will consider adding it to our future plans based on the customer demand. Thank you in advance.
and it would be difficult to assume and handle all possible date formats
So let it on the user.. in similar way as you let him to registerLocaleData from your INTLs files
OR just use native browser Date.parse() method as it is common wide-used practice to use ISO 8601 literally everywhere.
with best regards