@slickgrid-universal/row-detail-view-plugin 5.12.2 → 5.13.1

package/dist/cjs/slickRowDetailView.js

@@ -18,14 +18,14 @@ class SlickRowDetailView {
         this.pluginName = 'RowDetailView';
         this._dataViewIdProperty = 'id';
         this._expandableOverride = null;
-        this._expandedRows = new Set();
+        this._expandedRowIds = new Set();
         this._gridRowBuffer = 0;
         this._gridUid = '';
         this._keyPrefix = '';
-        this._lastRange = null;
-        this._outsideRange = 5;
+        this._disposedRows = new Set();
         this._rowIdsOutOfViewport = new Set();
-        this._visibleRenderedCellCount = 0;
+        this._renderedViewportRowIds = new Set();
+        this._renderedIds = new Set();
         this._defaults = {
             alwaysRenderColumn: true,
             columnId: '_detail_selector',
@@ -34,13 +34,12 @@ class SlickRowDetailView {
             collapseAllOnSort: true,
             collapsedClass: undefined,
             expandedClass: undefined,
-            keyPrefix: '_',
+            keyPrefix: '__',
             loadOnce: false,
             maxRows: undefined,
             reorderable: false,
             saveDetailViewOnScroll: true,
             singleRowExpand: false,
-            useSimpleViewportCalc: false,
             toolTip: '',
             width: 30,
         };
@@ -49,6 +48,7 @@ class SlickRowDetailView {
         this.onAsyncResponse = new common_1.SlickEvent('onAsyncResponse');
         this.onAfterRowDetailToggle = new common_1.SlickEvent('onAfterRowDetailToggle');
         this.onBeforeRowDetailToggle = new common_1.SlickEvent('onBeforeRowDetailToggle');
+        this.onBeforeRowOutOfViewportRange = new common_1.SlickEvent('onBeforeRowOutOfViewportRange');
         this.onRowBackToViewportRange = new common_1.SlickEvent('onRowBackToViewportRange');
         this.onRowOutOfViewportRange = new common_1.SlickEvent('onRowOutOfViewportRange');
     }
@@ -72,21 +72,14 @@ class SlickRowDetailView {
     get gridUid() {
         return this._gridUid || this._grid?.getUID() || '';
     }
-    set lastRange(range) {
-        this._lastRange = range;
-    }
     set rowIdsOutOfViewport(rowIds) {
         this._rowIdsOutOfViewport = new Set(rowIds);
     }
-    get visibleRenderedCellCount() {
-        return this._visibleRenderedCellCount;
-    }
     /**
      * Initialize the Export Service
      * @param _grid
      */
     init(grid) {
-        this._grid = grid;
         if (!grid) {
             throw new Error('[Slickgrid-Universal] RowDetailView Plugin requires the Grid instance to be passed as argument to the "init()" method.');
         }
@@ -95,7 +88,7 @@ class SlickRowDetailView {
         if (!this._addonOptions) {
             this._addonOptions = (0, utils_1.extend)(true, {}, this._defaults, this.gridOptions.rowDetailView);
         }
-        this._keyPrefix = this._addonOptions?.keyPrefix || '_';
+        this._keyPrefix = this._addonOptions?.keyPrefix || '__';
         // add PubSub instance to all SlickEvent
         common_1.Utils.addSlickEventPubSubWhenDefined(this.pubSubService, this);
         // Update the minRowBuffer so that the view doesn't disappear when it's at top of screen + the original default 3
@@ -104,20 +97,40 @@ class SlickRowDetailView {
         this._eventHandler
             .subscribe(this._grid.onClick, this.handleClick.bind(this))
             .subscribe(this._grid.onBeforeEditCell, () => this.collapseAll())
-            .subscribe(this._grid.onScroll, this.handleScroll.bind(this));
+            .subscribe(this._grid.onScroll, () => this.recalculateOutOfRangeViews(true, 0))
+            .subscribe(this._grid.onBeforeRemoveCachedRow, (_e, args) => this.handleRemoveRow(args.row));
         // Sort will, by default, Collapse all of the open items (unless user implements his own onSort which deals with open row and padding)
         if (this._addonOptions.collapseAllOnSort) {
             // sort event can be triggered by column header click or from header menu
             this.pubSubService.subscribe('onSortChanged', () => this.collapseAll());
-            this._expandedRows.clear();
-            this._rowIdsOutOfViewport.clear();
         }
         this._eventHandler.subscribe(this.dataView.onRowCountChanged, () => {
             this._grid.updateRowCount();
             this._grid.render();
         });
         this._eventHandler.subscribe(this.dataView.onRowsChanged, (_e, args) => {
-            this._grid.invalidateRows(args.rows);
+            const cachedRows = Object.keys(this._grid.getRowCache()).map(Number);
+            const toInvalidateRows = [];
+            const intersectedRows = args.rows.filter((nb) => cachedRows.includes(nb));
+            // only consider rows to invalidate as rows that exists in the viewport (cached rows)
+            this._expandedRowIds.forEach((itemId) => {
+                const idx = this.dataView.getRowById(itemId);
+                if (idx !== undefined && intersectedRows.includes(idx)) {
+                    toInvalidateRows.push(idx);
+                }
+            });
+            // don't invalidate row detail that were already rendered and visible
+            // for example, if we open row 3 and then row 1, row 3 will be pushed down but it was already rendered so no need to re-render it
+            this._renderedIds.forEach((rowId) => {
+                const dataRowIdx = this.dataView.getRowById(rowId);
+                if (dataRowIdx !== undefined) {
+                    const invRowIdx = toInvalidateRows.findIndex((r) => r === dataRowIdx);
+                    if (invRowIdx >= 0) {
+                        toInvalidateRows.splice(invRowIdx, 1);
+                    }
+                }
+            });
+            this._grid.invalidateRows(toInvalidateRows);
             this._grid.render();
         });
         // subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finished
@@ -126,22 +139,14 @@ class SlickRowDetailView {
         this._eventHandler.subscribe(this.dataView.onSetItemsCalled, () => {
             this._dataViewIdProperty = this.dataView?.getIdPropertyName() || 'id';
         });
-        // if we use the alternative & simpler calculation of the out of viewport range
-        // we will need to know how many rows are rendered on the screen and we need to wait for grid to be rendered
-        // unfortunately there is no triggered event for knowing when grid is finished, so we use 250ms delay and it's typically more than enough
-        if (this._addonOptions.useSimpleViewportCalc) {
-            this._eventHandler.subscribe(this._grid.onRendered, (_e, args) => {
-                if (args?.endRow) {
-                    this._visibleRenderedCellCount = args.endRow - args.startRow;
-                }
-            });
-        }
     }
     /** Dispose of the Slick Row Detail View */
     dispose() {
         this._eventHandler?.unsubscribeAll();
-        this._expandedRows.clear();
+        this._expandedRowIds.clear();
         this._rowIdsOutOfViewport.clear();
+        this._renderedViewportRowIds.clear();
+        clearTimeout(this._backViewportTimer);
     }
     create(columnDefinitions, gridOptions) {
         if (!gridOptions.rowDetailView) {
@@ -188,16 +193,17 @@ class SlickRowDetailView {
     /** Collapse all of the open items */
     collapseAll() {
         this.dataView.beginUpdate();
-        this._expandedRows.forEach((expandedRow) => {
-            this.collapseDetailView(expandedRow, true);
+        this._expandedRowIds.forEach((itemId) => {
+            this.collapseDetailView(itemId, true);
         });
         this.dataView.endUpdate();
     }
-    /** Colapse an Item so it is not longer seen */
-    collapseDetailView(item, isMultipleCollapsing = false) {
+    /** Collapse an Item so it is not longer seen */
+    collapseDetailView(itemId, isMultipleCollapsing = false) {
         if (!isMultipleCollapsing) {
             this.dataView.beginUpdate();
         }
+        const item = this.dataView.getItemById(itemId);
         // Save the details on the collapse assuming onetime loading
         if (this._addonOptions.loadOnce) {
             this.saveDetailView(item);
@@ -208,20 +214,26 @@ class SlickRowDetailView {
         }
         item[`${this._keyPrefix}sizePadding`] = 0;
         this.dataView.updateItem(item[this._dataViewIdProperty], item);
-        // Remove the item from the expandedRows
-        this._expandedRows = new Set(Array.from(this._expandedRows).filter((expRow) => expRow[this._dataViewIdProperty] !== item[this._dataViewIdProperty]));
+        // Remove the item from the expandedRows & renderedIds
+        this._expandedRowIds = new Set(Array.from(this._expandedRowIds).filter((expItemId) => expItemId !== item[this._dataViewIdProperty]));
+        this._renderedIds.delete(item[this._dataViewIdProperty]);
+        // we need to reevaluate & invalidate any row detail that are shown on top of the row that we're closing
+        this.reevaluateRenderedRowIds(item);
         if (!isMultipleCollapsing) {
             this.dataView.endUpdate();
         }
     }
     /** Expand a row given the dataview item that is to be expanded */
-    expandDetailView(item) {
+    expandDetailView(itemId) {
         if (this._addonOptions?.singleRowExpand) {
             this.collapseAll();
         }
+        const item = this.dataView.getItemById(itemId);
+        // we need to reevaluate & invalidate any row detail that are shown on top of the row that we're closing
+        this.reevaluateRenderedRowIds(item);
         item[`${this._keyPrefix}collapsed`] = false;
-        this._expandedRows.add(item);
-        // In the case something went wrong loading it the first time such a scroll of screen before loaded
+        this._expandedRowIds.add(itemId);
+        // in the case something went wrong loading it the first time such a scroll of screen before loaded
         if (!item[`${this._keyPrefix}detailContent`]) {
             item[`${this._keyPrefix}detailViewLoaded`] = false;
         }
@@ -245,13 +257,20 @@ class SlickRowDetailView {
         // async server call
         this._addonOptions.process(item);
     }
+    /** reset all Set rows/ids cache and start empty (but keep expanded rows ref) */
+    resetRenderedRows() {
+        this._renderedViewportRowIds.clear();
+        this._disposedRows.clear();
+    }
     /** Saves the current state of the detail view */
     saveDetailView(item) {
-        const view = document.querySelector(`.${this.gridUid} .innerDetailView_${item[this._dataViewIdProperty]}`);
-        if (view) {
-            const html = view.innerHTML;
-            if (html !== undefined) {
-                item[`${this._keyPrefix}detailContent`] = html;
+        if (this._addonOptions.loadOnce) {
+            const view = document.querySelector(`.${this.gridUid} .innerDetailView_${item[this._dataViewIdProperty]}`);
+            if (view) {
+                const html = view.innerHTML;
+                if (html !== undefined) {
+                    item[`${this._keyPrefix}detailContent`] = html;
+                }
             }
         }
     }
@@ -264,13 +283,14 @@ class SlickRowDetailView {
             console.error('SlickRowDetailView plugin requires the onAsyncResponse() to supply "args.item" property.');
             return;
         }
-        // we accept item/itemDetail, just get the one which has data
+        // @deprecated `args.itemDetail` we accept item/itemDetail, just get the one which has data
         const itemDetail = args.item || args.itemDetail;
-        // If we just want to load in a view directly we can use detailView property to do so
+        // if we just want to load in a view directly we can use detailView property to do so
         itemDetail[`${this._keyPrefix}detailContent`] = args.detailView ?? this._addonOptions?.postTemplate?.(itemDetail);
         itemDetail[`${this._keyPrefix}detailViewLoaded`] = true;
         this.dataView.updateItem(itemDetail[this._dataViewIdProperty], itemDetail);
         // trigger an event once the post template is finished loading
+        this._renderedIds.add(itemDetail[this.dataViewIdProperty]);
         this.onAsyncEndUpdate.notify({
             grid: this._grid,
             item: itemDetail,
@@ -278,7 +298,6 @@ class SlickRowDetailView {
         }, e, this);
     }
     /**
-     * TODO interface only has a GETTER not a SETTER..why?
      * Override the logic for showing (or not) the expand icon (use case example: only every 2nd row is expandable)
      * Method that user can pass to override the default behavior or making every row an expandable row.
      * In order word, user can choose which rows to be an available row detail (or not) by providing his own logic.
@@ -313,8 +332,8 @@ class SlickRowDetailView {
         };
     }
     /** return the currently expanded rows */
-    getExpandedRows() {
-        return Array.from(this._expandedRows);
+    getExpandedRowIds() {
+        return Array.from(this._expandedRowIds);
     }
     /** return the rows that are out of the viewport */
     getOutOfViewportRows() {
@@ -332,7 +351,7 @@ class SlickRowDetailView {
         if (!item) {
             return;
         }
-        // Grad each of the DOM elements
+        // Grab each of the DOM elements
         const mainContainer = document.querySelector(`.${this.gridUid} .detailViewContainer_${item[this._dataViewIdProperty]}`);
         const cellItem = document.querySelector(`.${this.gridUid} .cellDetailView_${item[this._dataViewIdProperty]}`);
         const inner = document.querySelector(`.${this.gridUid} .innerDetailView_${item[this._dataViewIdProperty]}`);
@@ -373,11 +392,61 @@ class SlickRowDetailView {
         // Lastly save the updated state
         this.saveDetailView(item);
     }
+    /**
+     * (re)calculate/sync row detail views that are out of range of the viewport and trigger events (when enabled)
+     * @param {Boolean} [triggerEvent] - should trigger notify event which will re-render the detail view
+     * @param {Number} [delay] - optional delay to execute the calculation of out of range views
+     */
+    recalculateOutOfRangeViews(triggerEvent = true, delay) {
+        clearTimeout(this._backViewportTimer);
+        const calculateFn = () => this._expandedRowIds.forEach((itemId) => {
+            const item = this.dataView.getItemById(itemId);
+            const rowIdx = this.dataView.getRowById(itemId);
+            const cachedRows = Object.keys(this._grid.getRowCache()).map(Number);
+            const visible = this._grid.getRenderedRange();
+            const rowDetailCount = this.gridOptions.rowDetailView?.panelRows ?? 0;
+            this._visibleRenderedCell = { startRow: visible.top, endRow: visible.bottom };
+            let { startRow, endRow } = this._visibleRenderedCell;
+            if (rowIdx >= startRow && rowIdx <= endRow) {
+                const rowSum = rowIdx + (this.gridOptions.rowDetailView?.panelRows ?? 0);
+                if (rowSum > endRow) {
+                    endRow = rowSum;
+                }
+            }
+            const rdEndRow = rowIdx + rowDetailCount;
+            if (startRow > rowIdx && rowIdx < rdEndRow && rdEndRow > this._visibleRenderedCell.startRow + 1) {
+                startRow = rowIdx;
+            }
+            this._visibleRenderedCell = { startRow, endRow };
+            if (!this._renderedViewportRowIds.has(itemId) &&
+                this._visibleRenderedCell &&
+                rowIdx >= this._visibleRenderedCell.startRow &&
+                rowIdx <= this._visibleRenderedCell.endRow &&
+                cachedRows.includes(rowIdx)) {
+                this._disposedRows.delete(rowIdx);
+                this.notifyViewportChange(item, 'add', triggerEvent);
+            }
+            else if ((this._disposedRows.has(rowIdx) && !cachedRows.includes(rowIdx)) ||
+                (!cachedRows.includes(rowIdx) &&
+                    this._renderedViewportRowIds.has(itemId) &&
+                    this._visibleRenderedCell &&
+                    (rowIdx < this._visibleRenderedCell.startRow || rowIdx > this._visibleRenderedCell.endRow))) {
+                this.notifyViewportChange(item, 'remove', triggerEvent);
+            }
+        });
+        if (delay !== undefined) {
+            this._backViewportTimer = setTimeout(calculateFn, delay);
+        }
+        else {
+            calculateFn();
+        }
+    }
     // --
     // protected functions
     // ------------------
     /**
-     * create the detail ctr node. this belongs to the dev & can be custom-styled as per
+     * create the row detail ctr node. this belongs to the dev & can be custom-styled as per
+     * @param {Object} item
      */
     applyTemplateNewLineHeight(item) {
         // the height is calculated by the template row count (how many line of items does the template view have)
@@ -392,82 +461,17 @@ class SlickRowDetailView {
             this.dataView.insertItem((idxParent || 0) + idx, this.getPaddingItem(item, idx));
         }
     }
-    calculateOutOfRangeViews() {
-        if (this._grid) {
-            let scrollDir;
-            const renderedRange = this._grid.getRenderedRange();
-            // Only check if we have expanded rows
-            if (this._expandedRows.size) {
-                // Assume scroll direction is down by default.
-                scrollDir = 'DOWN';
-                if (this._lastRange) {
-                    // Some scrolling isn't anything as the range is the same
-                    if (this._lastRange.top === renderedRange.top && this._lastRange.bottom === renderedRange.bottom) {
-                        return;
-                    }
-                    // If our new top is smaller we are scrolling up
-                    if (this._lastRange.top > renderedRange.top ||
-                        // Or we are at very top but our bottom is increasing
-                        (this._lastRange.top === 0 && renderedRange.top === 0 && this._lastRange.bottom > renderedRange.bottom)) {
-                        scrollDir = 'UP';
-                    }
-                }
+    notifyViewportChange(item, action, triggerEvent = true) {
+        if (item) {
+            const itemId = item[this._dataViewIdProperty];
+            if (action === 'add') {
+                this._renderedViewportRowIds.add(itemId);
+                triggerEvent && this.notifyBackToViewportWhenDomExist(item);
+            }
+            else if (action === 'remove') {
+                this._renderedViewportRowIds.delete(itemId);
+                triggerEvent && this.notifyOutOfViewport(item);
             }
-            this._expandedRows.forEach((row) => {
-                const rowIndex = this.dataView.getRowById(row[this._dataViewIdProperty]);
-                const rowPadding = row[`${this._keyPrefix}sizePadding`];
-                const isRowOutOfRange = this._rowIdsOutOfViewport.has(row[this._dataViewIdProperty]);
-                if (scrollDir === 'UP') {
-                    // save the view when asked
-                    if (this._addonOptions.saveDetailViewOnScroll) {
-                        // If the bottom item within buffer range is an expanded row save it.
-                        if (rowIndex >= renderedRange.bottom - this._gridRowBuffer) {
-                            this.saveDetailView(row);
-                        }
-                    }
-                    // If the row expanded area is within the buffer notify that it is back in range
-                    if (isRowOutOfRange && rowIndex - this._outsideRange < renderedRange.top && rowIndex >= renderedRange.top) {
-                        this.notifyBackToViewportWhenDomExist(row, row[this._dataViewIdProperty]);
-                    }
-                    else if (!isRowOutOfRange && rowIndex + rowPadding > renderedRange.bottom) {
-                        // if our first expanded row is about to go off the bottom
-                        this.notifyOutOfViewport(row, row[this._dataViewIdProperty]);
-                    }
-                }
-                else if (scrollDir === 'DOWN') {
-                    // save the view when asked
-                    if (this._addonOptions.saveDetailViewOnScroll) {
-                        // If the top item within buffer range is an expanded row save it.
-                        if (rowIndex <= renderedRange.top + this._gridRowBuffer) {
-                            this.saveDetailView(row);
-                        }
-                    }
-                    // If row index is i higher than bottom with some added value (To ignore top rows off view) and is with view and was our of range
-                    if (isRowOutOfRange && rowIndex + rowPadding + this._outsideRange > renderedRange.bottom && rowIndex < rowIndex + rowPadding) {
-                        this.notifyBackToViewportWhenDomExist(row, row[this._dataViewIdProperty]);
-                    }
-                    else if (!isRowOutOfRange && rowIndex < renderedRange.top) {
-                        // if our row is outside top of and the buffering zone but not in the array of outOfVisable range notify it
-                        this.notifyOutOfViewport(row, row[this._dataViewIdProperty]);
-                    }
-                }
-            });
-            this._lastRange = renderedRange;
-        }
-    }
-    calculateOutOfRangeViewsSimplerVersion() {
-        if (this._grid) {
-            const renderedRange = this._grid.getRenderedRange();
-            this._expandedRows.forEach((row) => {
-                const rowIndex = this.dataView.getRowById(row[this._dataViewIdProperty]);
-                const isOutOfVisibility = this.checkIsRowOutOfViewportRange(rowIndex, renderedRange);
-                if (!isOutOfVisibility && this._rowIdsOutOfViewport.has(row[this._dataViewIdProperty])) {
-                    this.notifyBackToViewportWhenDomExist(row, row[this._dataViewIdProperty]);
-                }
-                else if (isOutOfVisibility) {
-                    this.notifyOutOfViewport(row, row[this._dataViewIdProperty]);
-                }
-            });
         }
     }
     checkExpandableOverride(row, dataContext, grid) {
@@ -476,9 +480,6 @@ class SlickRowDetailView {
         }
         return true;
     }
-    checkIsRowOutOfViewportRange(rowIndex, renderedRange) {
-        return Math.abs(renderedRange.bottom - this._gridRowBuffer - rowIndex) > this._visibleRenderedCellCount * 2;
-    }
     /** Get the Row Detail padding (which are the rows dedicated to the detail panel) */
     getPaddingItem(parent, offset) {
         const item = {};
@@ -562,11 +563,12 @@ class SlickRowDetailView {
     /** When row is getting toggled, we will handle the action of collapsing/expanding */
     handleAccordionShowHide(item) {
         if (item) {
+            const itemId = item[this._dataViewIdProperty];
             if (!item[`${this._keyPrefix}collapsed`]) {
-                this.collapseDetailView(item);
+                this.collapseDetailView(itemId);
             }
             else {
-                this.expandDetailView(item);
+                this.expandDetailView(itemId);
             }
         }
     }
@@ -592,52 +594,89 @@ class SlickRowDetailView {
                     .getReturnValue() === false) {
                     return;
                 }
+                // tag any row details that will need to be re-rendered after the row detail is toggled.
+                // for example if row(2) is open and we open row(1) then row(2) needs to be re-rendered,
+                // if however row(1) is open and we open row(2) then there is nothing to re-render
+                const toReRenderItems = [];
+                const visible = this._grid.getRenderedRange();
+                this._expandedRowIds.forEach((itemId) => {
+                    const row = this.dataView.getRowById(itemId);
+                    if (row !== undefined && row > args.row && row >= visible.top && row <= visible.bottom) {
+                        const item = this.dataView.getItemById(itemId);
+                        toReRenderItems.push(item);
+                        this.notifyOutOfViewport(item);
+                    }
+                });
                 this.toggleRowSelection(args.row, dataContext);
                 // trigger an event after toggling
                 this.onAfterRowDetailToggle.notify({
                     grid: this._grid,
                     item: dataContext,
-                    expandedRows: Array.from(this._expandedRows),
+                    expandedRows: Array.from(this._expandedRowIds).map((id) => this.dataView.getItemById(id)),
                 }, e, this);
+                // re-render the row details that were tagged as
+                toReRenderItems.forEach(item => this.notifyViewportChange(item, 'add', true));
                 e.stopPropagation();
                 e.stopImmediatePropagation();
             }
         }
     }
-    handleScroll() {
-        if (this._addonOptions.useSimpleViewportCalc) {
-            this.calculateOutOfRangeViewsSimplerVersion();
-        }
-        else {
-            this.calculateOutOfRangeViews();
+    handleRemoveRow(rowIndex) {
+        const item = this.dataView.getItemByIdx(rowIndex);
+        const rowId = item[this.dataViewIdProperty];
+        if (this._expandedRowIds.has(rowId)) {
+            this.onBeforeRowOutOfViewportRange.notify({
+                grid: this._grid,
+                item,
+                rowId,
+                rowIndex,
+                expandedRows: Array.from(this._expandedRowIds).map((id) => this.dataView.getItemById(id)),
+                rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, true)),
+            }, null, this);
+            this._disposedRows.add(rowIndex);
         }
     }
-    notifyOutOfViewport(item, rowId) {
+    notifyOutOfViewport(item) {
         const rowIndex = item.rowIndex || this.dataView.getRowById(item[this._dataViewIdProperty]);
+        const rowId = item[this.dataViewIdProperty];
+        this._renderedIds.delete(rowId);
         this.onRowOutOfViewportRange.notify({
             grid: this._grid,
             item,
             rowId,
             rowIndex,
-            expandedRows: Array.from(this._expandedRows),
+            expandedRows: Array.from(this._expandedRowIds).map((id) => this.dataView.getItemById(id)),
             rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, true)),
         }, null, this);
     }
-    notifyBackToViewportWhenDomExist(item, rowId) {
+    notifyBackToViewportWhenDomExist(item) {
         const rowIndex = item.rowIndex || this.dataView.getRowById(item[this._dataViewIdProperty]);
-        window.setTimeout(() => {
-            // make sure View Row DOM Element really exist before notifying that it's a row that is visible again
-            if (document.querySelector(`.${this.gridUid} .cellDetailView_${item[this._dataViewIdProperty]}`)) {
-                this.onRowBackToViewportRange.notify({
-                    grid: this._grid,
-                    item,
-                    rowId,
-                    rowIndex,
-                    expandedRows: Array.from(this._expandedRows),
-                    rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, false)),
-                }, null, this);
+        const rowId = item[this.dataViewIdProperty];
+        // make sure View Row DOM Element really exist before notifying that it's a row that is visible again
+        if (document.querySelector(`.${this.gridUid} .cellDetailView_${item[this._dataViewIdProperty]}`)) {
+            this.onRowBackToViewportRange.notify({
+                grid: this._grid,
+                item,
+                rowId,
+                rowIndex,
+                expandedRows: Array.from(this._expandedRowIds).map((id) => this.dataView.getItemById(id)),
+                rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, false)),
+            }, null, this);
+        }
+    }
+    /**
+     * keep any row detail that are shown on top of the row that we're opening
+     * but invalidate any rows that are after the row that we're opening
+     */
+    reevaluateRenderedRowIds(item) {
+        // get current item row index
+        const rowIdx = this.dataView.getRowById(item[this._dataViewIdProperty]);
+        this._renderedViewportRowIds.forEach((rid) => {
+            const invRowIdx = this.dataView.getRowById(rid);
+            if (invRowIdx !== undefined && invRowIdx > rowIdx) {
+                this.notifyViewportChange(this.dataView.getItemById(rid), 'remove');
             }
-        }, 100);
+        });
     }
     syncOutOfViewportArray(rowId, isAdding) {
         const hasRowId = this._rowIdsOutOfViewport.has(rowId);