Troubleshooting

This article provides solutions for issues you might encounter while working with the Kendo UI Grid for Angular.

Dates are not properly formatted. During sorting, filtering, or editing, dates are treated as strings

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 is coming serialized from a remote server or for an 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 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)
                }))
            );
    }

SelectAll checkbox is not working beside Angular Material CDK Overlay

When the Grid select-all feature is enabled and Angular Material CDK Overlay is activated on the same page, the select-all checkbox is not working. The Angular Material CDK Overlay attaches a click event listener to document.body, which triggers the Change Detection and prevents the select-all checkbox from functioning correctly.

Solution

If the Grid is within an Angular Material Dialog, open the dialog outside of the Angular Zone.

    public openDialog(): void {
        this.zone.runOutsideAngular(() => {
            this.dialogRef = this.dialog.open(DialogContent);
        });
    }