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

Environment

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.

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