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`.
siemens · Jul 3, 2024 · 0cb2413 · 0cb2413
1 parent 54d73c6
commit 0cb2413
Showing 1 changed file with 24 additions and 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
@@ -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
     });
   }