New to Kendo UI for Angular? Start a free 30-day trial

Environment

ProductProgress® Kendo UI® for Angular Grid

Description

Dates are treated as strings when sorting, filtering, or editing the Grid. For example, the date sorting is alphabetical and the filtering operators are incorrect.

Cause

When the Grid data contains dates, they have to be instances of the JavaScript Date object. This ensures that dates are handled correctly during formatting, sorting, filtering, and editing.

Solution

If the remote server returns serialized data or the data contains string representations of dates, map the data so that each "date" property has a Date JavaScript object as a value.

protected fetch(tableName: string, state: any): Observable<GridDataResult> {
       const queryStr = `${toODataString(state)}&$count=true`;

       return this.http
           .get(`${this.BASE_URL}${tableName}?${queryStr}`)
           .pipe(
               map(response => (<GridDataResult>{
                   data: response['value'].map(item => {
                       item.dateField = new Date(item.dateField);
                       return item;
                   }),
                   total: parseInt(response['@odata.count'], 10)
               }))
           );
   }

In this article

Not finding the help you need?