fix(plugin): Row Detail loses html content when used with Row Selection

- fixes bug reported in this Stack Overflow [question](https://stackoverflow.com/questions/65520443/combination-of-row-detail-view-and-checkboxselector-option-makes-weird-behavior)

src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts

@@ -41,6 +41,7 @@ const gridStub = {
   registerPlugin: jest.fn(),
   setSelectionModel: jest.fn(),
   onColumnsReordered: new Slick.Event(),
+  onSelectedRowsChanged: new Slick.Event(),
   onSort: new Slick.Event(),
 };
 
@@ -460,9 +461,32 @@ describe('rowDetailViewExtension', () => {
       expect(handlerSpy).toHaveBeenCalled();
     });
 
+    it('should call "redrawAllViewComponents" when using Row Selection and the event "onSelectedRowsChanged" is triggered', (done) => {
+      const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
+      gridOptionsMock.enableCheckboxSelector = true;
+      const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
+      const redrawSpy = jest.spyOn(extension, 'redrawAllViewComponents');
+      const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any);
+
+      const instance = extension.create(columnsMock, gridOptionsMock);
+
+      extension.register();
+      instance.onBeforeRowDetailToggle.subscribe(() => {
+        gridStub.onSelectedRowsChanged.notify({ rows: [0], previousSelectedRows: [] }, new Slick.EventData(), gridStub);
+        expect(appendSpy).toHaveBeenCalledWith(undefined, expect.objectContaining({ className: 'container_field1' }), true);
+        done();
+      });
+      instance.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new Slick.EventData(), gridStub);
+      instance.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new Slick.EventData(), gridStub);
+
+      expect(handlerSpy).toHaveBeenCalled();
+      expect(redrawSpy).toHaveBeenCalledTimes(2);
+    });
+
     it('should call "redrawAllViewComponents" when event "filterChanged" is triggered', (done) => {
       const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
       const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
+      const redrawSpy = jest.spyOn(extension, 'redrawAllViewComponents');
       const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any);
 
       const instance = extension.create(columnsMock, gridOptionsMock);
@@ -477,6 +501,7 @@ describe('rowDetailViewExtension', () => {
       instance.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new Slick.EventData(), gridStub);
 
       expect(handlerSpy).toHaveBeenCalled();
+      expect(redrawSpy).toHaveBeenCalledTimes(2);
     });
 
     it('should call "renderAllViewComponents" when grid event "onAfterRowDetailToggle" is triggered', (done) => {

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

@@ -211,14 +211,20 @@ export class RowDetailViewExtension implements Extension {
         // --
         // hook some events needed by the Plugin itself
 
-        this._eventHandler.subscribe(this.sharedService.grid.onColumnsReordered, () => this.redrawAllViewComponents());
+        // we need to redraw the open detail views if we change column position (column reorder)
+        this._eventHandler.subscribe(this.sharedService.grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
+
+        // on row selection changed, we also need to redraw
+        if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
+          this._eventHandler.subscribe(this.sharedService.grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+        }
 
         // on sort, all row detail are collapsed so we can dispose of all the Views as well
-        this._eventHandler.subscribe(this.sharedService.grid.onSort, () => this.disposeAllViewComponents());
+        this._eventHandler.subscribe(this.sharedService.grid.onSort, this.disposeAllViewComponents.bind(this));
 
         // on filter changed, we need to re-render all Views
         this._subscriptions.push(
-          this.filterService.onFilterChanged.subscribe(() => this.redrawAllViewComponents())
+          this.filterService.onFilterChanged.subscribe(this.redrawAllViewComponents.bind(this))
         );
       }
       return this._addon;