fix: Row Detail redraw all should work as expected

Author: ghiscoding

src/app/examples/grid45-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AngularGridInstance, Column, GridOption, GridState } from '../modules/angular-slickgrid';
 
 export interface Distributor {
@@ -25,7 +25,7 @@ export interface OrderData {
   templateUrl: './grid45-detail.component.html',
   encapsulation: ViewEncapsulation.None,
 })
-export class Grid45DetailComponent implements OnInit {
+export class Grid45DetailComponent implements OnDestroy, OnInit {
   model!: Distributor;
   innerColDefs: Column[] = [];
   innerGridOptions!: GridOption;
@@ -46,6 +46,10 @@ export class Grid45DetailComponent implements OnInit {
     this.showGrid = true;
   }
 
+  ngOnDestroy(): void {
+    console.log('destroying row detail');
+  }
+
   angularGridReady(angularGrid: AngularGridInstance) {
     this.angularGrid = angularGrid;
   }

src/app/examples/grid45.component.html

@@ -24,7 +24,7 @@ <h2>
     </button>
   </h2>
 
-  <div class="subtitle">
+  <div class="subtitle" [hidden]="!showSubTitle">
     Add functionality to show extra information with a Row Detail View, (<a
       href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/row-detail"
       target="_blank"
@@ -40,7 +40,9 @@ <h2>
       <button class="btn btn-outline-secondary btn-sm btn-icon ms-1" data-test="collapse-all-btn" (click)="closeAllRowDetail()">
         Close all Row Details
       </button>
-      &nbsp;&nbsp;
+      <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="redraw-all-btn" (click)="redrawAllRowDetail()">
+        Force redraw all Row Details
+      </button>
 
       <span class="d-inline-flex gap-4px">
         <label for="detailViewRowCount">Detail View Rows Shown: </label>

src/app/examples/grid45.component.ts

@@ -160,9 +160,11 @@ export class Grid45Component implements OnDestroy, OnInit {
   }
 
   closeAllRowDetail() {
-    if (this.angularGrid?.extensionService) {
-      this.rowDetailInstance.collapseAll();
-    }
+    this.rowDetailInstance?.collapseAll();
+  }
+
+  redrawAllRowDetail() {
+    this.rowDetailInstance?.redrawAllViewComponents(true);
   }
 
   /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
@@ -230,5 +232,6 @@ export class Grid45Component implements OnDestroy, OnInit {
     this.showSubTitle = !this.showSubTitle;
     const action = this.showSubTitle ? 'remove' : 'add';
     document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService?.resizeGrid(1);
   }
 }

src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

@@ -209,11 +209,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
         // hook some events needed by the Plugin itself
 
         // we need to redraw the open detail views if we change column position (column reorder)
-        this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
+        this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents());
 
         // on row selection changed, we also need to redraw
         if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
-          this.eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+          this.eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents());
         }
 
         // on sort, all row detail are collapsed so we can dispose of all the Views as well
@@ -223,7 +223,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
         this._subscriptions.push(
           this.eventPubSubService?.subscribe(
             ['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'],
-            this.redrawAllViewComponents.bind(this)
+            () => this.redrawAllViewComponents()
           ),
           this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () =>
             window.setTimeout(() => this.redrawAllViewComponents())
@@ -235,10 +235,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
   }
 
   /** Redraw (re-render) all the expanded row detail View Components */
-  redrawAllViewComponents() {
+  redrawAllViewComponents(forceRedraw = false) {
     this.resetRenderedRows();
     this._views.forEach((view) => {
-      if (!view.rendered) {
+      if (!view.rendered || forceRedraw) {
+        forceRedraw && view.componentRef?.destroy();
         this.redrawViewComponent(view);
       }
     });
@@ -321,7 +322,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     const compRef = expandedView?.componentRef;
     if (compRef) {
       this.appRef.detachView(compRef.hostView);
-      if (compRef?.destroy) {
+      if (typeof compRef?.destroy === 'function') {
         compRef.destroy();
         expandedView.rendered = false;
       }

test/cypress/e2e/example45.cy.ts

@@ -101,6 +101,26 @@ describe('Example 45 - Row Detail with inner Grid', () => {
     cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
   });
 
+  it('should force redraw of all Row Details and expect same row details to be opened and opened', () => {
+    cy.get('[data-test="redraw-all-btn"]').click();
+    cy.wait(10);
+
+    // 2nd row detail
+    cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
+    cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
+    cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
+    cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
+
+    // 3rd row detail
+    cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', '');
+    cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', '');
+    cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist');
+    cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261');
+    cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro');
+    cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267');
+    cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München');
+  });
+
   it('should close all rows', () => {
     cy.get('[data-test="collapse-all-btn"]').click();
   });