diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index bac0879007a..62bfdd57796 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -87,8 +87,10 @@ export class TableService { private valueSource = new Subject(); private totalRecordsSource = new Subject(); private columnsSource = new Subject(); + private isHeaderCheckboxSelection = new Subject(); sortSource$ = this.sortSource.asObservable(); + isHeaderCheckboxSelection$ = this.isHeaderCheckboxSelection.asObservable(); selectionSource$ = this.selectionSource.asObservable(); contextMenuSource$ = this.contextMenuSource.asObservable(); valueSource$ = this.valueSource.asObservable(); @@ -118,6 +120,10 @@ export class TableService { onColumnsChange(columns: any[]) { this.columnsSource.next(columns); } + + onHeaderCheckboxSelection(value) { + this.isHeaderCheckboxSelection.next(value); + } } /** * Table displays data in tabular format. @@ -4790,15 +4796,26 @@ export class TableCheckbox { subscription: Subscription; + tableHeaderCheckboxSubscription: Subscription; + + isTableHeaderCheckboxSelection: boolean = false; + constructor( public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef ) { this.subscription = this.dt.tableService.selectionSource$.subscribe(() => { - this.checked = this.dt.isSelected(this.value) && !this.disabled; + setTimeout(() => { + this.checked = this.isTableHeaderCheckboxSelection ? this.dt.isSelected(this.value) && !this.disabled : this.dt.isSelected(this.value); + this.cd.markForCheck(); + }); + this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined; - this.cd.markForCheck(); + }); + + this.tableHeaderCheckboxSubscription = this.dt.tableService.isHeaderCheckboxSelection$.subscribe((val) => { + this.isTableHeaderCheckboxSelection = val; }); } @@ -4815,6 +4832,7 @@ export class TableCheckbox { }, this.value ); + this.tableService.onHeaderCheckboxSelection(false); } DomHandler.clearSelection(); } @@ -4831,6 +4849,10 @@ export class TableCheckbox { if (this.subscription) { this.subscription.unsubscribe(); } + + if (this.tableHeaderCheckboxSubscription) { + this.tableHeaderCheckboxSubscription.unsubscribe(); + } } } @@ -4874,6 +4896,8 @@ export class TableHeaderCheckbox { valueChangeSubscription: Subscription; + tableHeaderCheckboxSubscription: Subscription; + constructor( public dt: Table, public tableService: TableService, @@ -4896,6 +4920,7 @@ export class TableHeaderCheckbox { onClick(event: Event) { if (!this.disabled) { if (this.dt.value && this.dt.value.length > 0) { + this.tableService.onHeaderCheckboxSelection(true); this.dt.toggleRowsWithCheckbox(event, !this.checked); } }