Kendo-angular: KendoTreelistColumn:Date doesnt work

Created on 28 Oct 2020  路  4Comments  路  Source: telerik/kendo-angular

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"
  };

image

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.

Question Team2 treelist

All 4 comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ulgen picture ulgen  路  3Comments

tsvetomir picture tsvetomir  路  3Comments

ilianiv picture ilianiv  路  3Comments

tsvetomir picture tsvetomir  路  3Comments

simon11196 picture simon11196  路  3Comments