Grid Dates Are Treated As Strings in Data Operations

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

During sorting, filtering, or editing, the dates in the Kendo UI for Angular Grid are not properly formatted and are treated as strings.

Cause

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

Solution

If the data that is coming from a remote server is serialized, or if for unspecified reasons the data contains string representations of dates instead of actual JavaScript Date objects, map the data so that each date property has a JavaScript Date as its value.

ts

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