From 0cb2413875b05c1d4a99a68c70d5ef0c9593bf52 Mon Sep 17 00:00:00 2001 From: chintankavathia Date: Wed, 3 Jul 2024 17:07:23 +0530 Subject: [PATCH] fix(rows): expand collapse not working correctly (#60) fixes the issue where `collapseAllGroups` and `expandAllGroups` methods don't work in case of grouped rows with `groupExpansionDefault` set to `true`. --- .../src/lib/components/body/body.component.ts | 53 +++++++++---------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts index 9a2b7d332..41e2ef145 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts @@ -403,40 +403,35 @@ export class DataTableBodyComponent implements OnInit, OnDestroy { */ ngOnInit(): void { if (this.rowDetail) { - this.listener = this.rowDetail.toggle.subscribe(({ type, value }: { type: string; value: any }) => { - if (type === 'row') { - this.toggleRowExpansion(value); - } - if (type === 'all') { - this.toggleAllRows(value); - } - - // Refresh rows after toggle - // Fixes #883 - this.updateIndexes(); - this.updateRows(); - this.cd.markForCheck(); - }); + this.listener = this.rowDetail.toggle.subscribe(({ type, value }: { type: string; value: any }) => + this.toggleStateChange(type, value) + ); } if (this.groupHeader) { this.listener = this.groupHeader.toggle.subscribe(({ type, value }: { type: string; value: any }) => { - if (type === 'group') { - this.toggleRowExpansion(value); - } - if (type === 'all') { - this.toggleAllRows(value); - } - - // Refresh rows after toggle - // Fixes #883 - this.updateIndexes(); - this.updateRows(); - this.cd.markForCheck(); + // Remove default expansion state once user starts manual toggle. + this.groupExpansionDefault = false; + this.toggleStateChange(type, value); }); } } + private toggleStateChange(type: string, value: any) { + if (type === 'group' || type === 'row') { + this.toggleRowExpansion(value); + } + if (type === 'all') { + this.toggleAllRows(value); + } + + // Refresh rows after toggle + // Fixes #883 + this.updateIndexes(); + this.updateRows(); + this.cd.markForCheck(); + } + /** * Called once, before the instance is destroyed. */ @@ -854,9 +849,9 @@ export class DataTableBodyComponent implements OnInit, OnDestroy { // Capture the row index of the first row that is visible on the viewport. const viewPortFirstRowIndex = this.getAdjustedViewPortIndex(); - + const rows = this.groupedRows ?? this.rows; if (expanded) { - for (const row of this.rows) { + for (const row of rows) { this.rowExpansions.push(row); } } @@ -868,7 +863,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy { // Emit all rows that have been expanded. this.detailToggle.emit({ - rows: this.rows, + rows: rows, currentIndex: viewPortFirstRowIndex }); }