Select All Checkbox Is Not Working beside Angular Material CDK Overlay in the Grid

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

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.

Cause

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.

ts

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