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