@slickgrid-universal/row-detail-plugin 0.0.0 → 11.0.0-beta.0

package/src/slickRowDetailView.ts

@@ -0,0 +1,1200 @@
+import { createDomElement, SlickEvent, SlickEventHandler, Utils as SlickUtils } from '@slickgrid-universal/common';
+import type {
+  Column,
+  ExternalResource,
+  FormatterResultWithHtml,
+  GridOption,
+  OnAfterRowDetailToggleArgs,
+  OnBeforeRowDetailToggleArgs,
+  OnRowBackOrOutOfViewportRangeArgs,
+  OnRowDetailAsyncEndUpdateArgs,
+  OnRowDetailAsyncResponseArgs,
+  PubSubService,
+  RowDetailView,
+  RowDetailViewOption,
+  SlickDataView,
+  SlickEventData,
+  SlickGrid,
+  SlickRowDetailView as UniversalRowDetailView,
+  UsabilityOverrideFn,
+} from '@slickgrid-universal/common';
+import { classNameToList, extend } from '@slickgrid-universal/utils';
+
+/**
+ * A plugin to add Row Detail Panel View (for example providing order detail info when clicking on the order row in the grid)
+ * Original StackOverflow question & article making this possible (thanks to violet313)
+ * https://stackoverflow.com/questions/10535164/can-slickgrids-row-height-be-dynamically-altered#29399927
+ * http://violet313.org/slickgrids/#intro
+ */
+export class SlickRowDetailView implements ExternalResource, UniversalRowDetailView {
+  // --
+  // public API
+  pluginName = 'RowDetailView';
+
+  /** Fired when the async response finished */
+  onAsyncEndUpdate: SlickEvent<OnRowDetailAsyncEndUpdateArgs>;
+
+  /** This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail */
+  onAsyncResponse: SlickEvent<OnRowDetailAsyncResponseArgs>;
+
+  /** Fired after the row detail gets toggled */
+  onAfterRowDetailToggle: SlickEvent<OnAfterRowDetailToggleArgs>;
+
+  /** Fired before the row detail gets toggled */
+  onBeforeRowDetailToggle: SlickEvent<OnBeforeRowDetailToggleArgs>;
+
+  /** Fired just before a row becomes out of viewport range (you can use this event to save inner Grid State before it gets destroyed) */
+  onBeforeRowOutOfViewportRange: SlickEvent<OnRowBackOrOutOfViewportRangeArgs>;
+
+  /** Fired after the row detail gets toggled */
+  onRowBackToViewportRange: SlickEvent<OnRowBackOrOutOfViewportRangeArgs>;
+
+  /** Fired after a row becomes out of viewport range (when user can't see the row anymore) */
+  onRowOutOfViewportRange: SlickEvent<OnRowBackOrOutOfViewportRangeArgs>;
+
+  // --
+  // protected props
+  protected _addonOptions!: RowDetailView;
+  protected _dataViewIdProperty = 'id';
+  protected _eventHandler: SlickEventHandler;
+  protected _expandableOverride: UsabilityOverrideFn | null = null;
+  protected _expandedRowIds: Set<number | string> = new Set();
+  protected _grid!: SlickGrid;
+  protected _gridRowBuffer = 0;
+  protected _gridUid = '';
+  protected _keyPrefix = '';
+  protected _disposedRows: Set<number> = new Set();
+  protected _rowIdsOutOfViewport: Set<number | string> = new Set();
+  protected _renderedViewportRowIds: Set<number | string> = new Set();
+  protected _pendingBackToViewportRows: Map<number | string, any> = new Map();
+  protected _renderedCollapsedGroupIds: Set<number | string> = new Set();
+  protected _renderedIds: Set<number | string> = new Set();
+  protected _overlayPanels: Map<number | string, HTMLDivElement> = new Map();
+  protected _pendingAsyncEndUpdates: Map<number | string, { eventData: SlickEventData; item: any; isDataViewUpdated: boolean }> = new Map();
+  protected _isUpdatingAsyncResponse = false;
+  protected _visibleRenderedCell?: { startRow: number; endRow: number };
+  protected _backViewportTimer: any;
+  protected _lastScrollLeft = 0;
+  protected _defaults = {
+    alwaysRenderColumn: true,
+    columnId: '_detail_selector',
+    field: '_detail_selector',
+    cssClass: 'detailView-toggle',
+    collapseAllOnSort: true,
+    collapsedClass: undefined,
+    expandedClass: undefined,
+    keyPrefix: '__',
+    loadOnce: false,
+    maxRows: undefined,
+    reorderable: false,
+    saveDetailViewOnScroll: true,
+    singleRowExpand: false,
+    toolTip: '',
+    width: 30,
+  } as unknown as RowDetailView;
+
+  /** Constructor of the SlickGrid 3rd party plugin, it can optionally receive options */
+  constructor(protected readonly pubSubService: PubSubService) {
+    this._eventHandler = new SlickEventHandler();
+    this.onAsyncEndUpdate = new SlickEvent<OnRowDetailAsyncEndUpdateArgs>('onAsyncEndUpdate');
+    this.onAsyncResponse = new SlickEvent<OnRowDetailAsyncResponseArgs>('onAsyncResponse');
+    this.onAfterRowDetailToggle = new SlickEvent<OnAfterRowDetailToggleArgs>('onAfterRowDetailToggle');
+    this.onBeforeRowDetailToggle = new SlickEvent<OnBeforeRowDetailToggleArgs>('onBeforeRowDetailToggle');
+    this.onBeforeRowOutOfViewportRange = new SlickEvent<OnRowBackOrOutOfViewportRangeArgs>('onBeforeRowOutOfViewportRange');
+    this.onRowBackToViewportRange = new SlickEvent<OnRowBackOrOutOfViewportRangeArgs>('onRowBackToViewportRange');
+    this.onRowOutOfViewportRange = new SlickEvent<OnRowBackOrOutOfViewportRangeArgs>('onRowOutOfViewportRange');
+  }
+
+  get addonOptions(): RowDetailView {
+    return this._addonOptions;
+  }
+
+  /** Getter of SlickGrid DataView object */
+  get dataView(): SlickDataView {
+    return this._grid?.getData<SlickDataView>() || {};
+  }
+
+  get dataViewIdProperty(): string {
+    return this._dataViewIdProperty;
+  }
+
+  get eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return this._grid?.getOptions() || {};
+  }
+
+  get gridUid(): string {
+    return this._gridUid || this._grid?.getUID() || '';
+  }
+
+  set rowIdsOutOfViewport(rowIds: Array<string | number>) {
+    this._rowIdsOutOfViewport = new Set(rowIds);
+  }
+
+  /**
+   * Initialize the Export Service
+   * @param _grid
+   */
+  init(grid: SlickGrid): void {
+    if (!grid) {
+      throw new Error(
+        '[Slickgrid-Universal] RowDetailView Plugin requires the Grid instance to be passed as argument to the "init()" method.'
+      );
+    }
+    this._grid = grid;
+    this._gridUid = grid.getUID();
+    if (!this._addonOptions) {
+      this._addonOptions = extend(true, {}, this._defaults, this.gridOptions.rowDetailView) as RowDetailView;
+    }
+    this._keyPrefix = this._addonOptions?.keyPrefix || '__';
+
+    // add PubSub instance to all SlickEvent
+    SlickUtils.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
+    this._gridRowBuffer = this.gridOptions.minRowBuffer || 0;
+    this.gridOptions.minRowBuffer = this._addonOptions.panelRows + 3;
+
+    this._eventHandler
+      .subscribe(this._grid.onClick, this.handleClick.bind(this))
+      .subscribe(this._grid.onKeyDown, this.handleKeyDown.bind(this))
+      .subscribe(this._grid.onBeforeEditCell, () => this.collapseAll())
+      .subscribe(this._grid.onScroll, (_e, { scrollLeft }) => {
+        this.recalculateOutOfRangeViews(true, 0, false);
+        // Vertical rendering positions panels; horizontal scrolling can happen without a render.
+        if (scrollLeft !== this._lastScrollLeft) {
+          this._lastScrollLeft = scrollLeft;
+          this.renderOverlayPanels();
+        }
+      })
+      .subscribe(this._grid.onBeforeRemoveCachedRow, (_e, args) => this.handleRemoveRow(args.row))
+
+      // Grouping events should trigger `onRowOutOfViewportRange` or `onRowBackToViewportRange`
+      .subscribe(this.dataView.onGroupCollapsed, (_e, { groupingKey }) => this.handleGroupCollapsed(groupingKey))
+      .subscribe(this.dataView.onGroupExpanded, (_e, { groupingKey }) => this.handleGroupExpanded(groupingKey));
+
+    // 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._eventHandler.subscribe(this.dataView.onRowCountChanged, () => {
+      // filtering/sorting can remove an expanded row's parent from the DataView, hide its Row Detail without collapsing it
+      // this runs synchronously as part of the DataView refresh(), ahead of any framework-specific "onFilterChanged" redraw
+      this.hideRowDetailsForFilteredOutParents();
+      this._grid.updateRowCount();
+      this._grid.render();
+      // re-show any Row Detail whose parent row is back in the filtered/sorted dataset and within the rendered range
+      this.recalculateOutOfRangeViews(true);
+    });
+
+    this._eventHandler.subscribe(this.dataView.onRowsChanged, (_e, args) => {
+      // filtering/sorting can remove an expanded row's parent from the DataView, hide its Row Detail without collapsing it
+      this.hideRowDetailsForFilteredOutParents();
+
+      // A suspended DataView only emits this event when endUpdate() releases its
+      // accumulated changes. Pending details are safe to finish on the grid render
+      // caused by this notification, not on an unrelated render in the meantime.
+      this._pendingAsyncEndUpdates.forEach((pendingUpdate) => (pendingUpdate.isDataViewUpdated = true));
+
+      const cachedRows = Object.keys(this._grid.getRowCache()).map(Number);
+      const toInvalidateRows: number[] = [];
+      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();
+      // re-show any Row Detail whose parent row is back in the filtered/sorted dataset and within the rendered range
+      this.recalculateOutOfRangeViews(true);
+    });
+
+    // subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finished
+    this._eventHandler.subscribe(this.onAsyncResponse, this.handleOnAsyncResponse.bind(this));
+
+    // after data is set, let's get the DataView Id Property name used (defaults to "id")
+    this._eventHandler.subscribe(this.dataView.onSetItemsCalled, () => {
+      this._dataViewIdProperty = this.dataView.getIdPropertyName() || 'id';
+    });
+
+    this._eventHandler.subscribe(this._grid.onRendered, () => {
+      this.renderOverlayPanels();
+      this._pendingBackToViewportRows.forEach((item) => this.notifyBackToViewportWhenDomExist(item));
+      if (!this._isUpdatingAsyncResponse) {
+        this.flushPendingAsyncEndUpdates();
+      }
+    });
+  }
+
+  /** Dispose of the Slick Row Detail View */
+  dispose(): void {
+    this.disposeOverlayPanels();
+    this._eventHandler?.unsubscribeAll();
+    this._expandedRowIds.clear();
+    this._rowIdsOutOfViewport.clear();
+    this._renderedViewportRowIds.clear();
+    this._pendingBackToViewportRows.clear();
+    this._pendingAsyncEndUpdates.clear();
+    clearTimeout(this._backViewportTimer);
+  }
+
+  create(columns: Column[], gridOptions: GridOption): UniversalRowDetailView | null {
+    if (!gridOptions.rowDetailView) {
+      throw new Error(
+        '[Slickgrid-Universal] The Row Detail View requires options to be passed via the "rowDetailView" property of the Grid Options'
+      );
+    }
+
+    this._addonOptions = extend(true, {}, this._defaults, gridOptions.rowDetailView) as RowDetailView;
+
+    // user could override the expandable icon logic from within the options or after instantiating the plugin
+    if (typeof this._addonOptions.expandableOverride === 'function') {
+      this.expandableOverride(this._addonOptions.expandableOverride);
+    }
+
+    if (Array.isArray(columns) && gridOptions) {
+      const newRowDetailViewColumn: Column = this.getColumnDefinition();
+
+      // add new row detail column unless it was already added
+      if (!columns.some((col) => col.id === newRowDetailViewColumn.id)) {
+        const rowDetailColDef = Array.isArray(columns) && columns.find((col) => col?.behavior === 'selectAndMove');
+        const finalRowDetailViewColumn = rowDetailColDef ? rowDetailColDef : newRowDetailViewColumn;
+
+        // column index position in the grid
+        const columnPosition = gridOptions?.rowDetailView?.columnIndexPosition ?? 0;
+        if (columnPosition > 0) {
+          columns.splice(columnPosition, 0, finalRowDetailViewColumn);
+        } else {
+          columns.unshift(finalRowDetailViewColumn);
+        }
+
+        this.pubSubService.publish(`onPluginColumnsChanged`, {
+          columns,
+          pluginName: this.pluginName,
+        });
+      }
+    }
+    return this as unknown as UniversalRowDetailView;
+  }
+
+  /** Get current plugin options */
+  getOptions(): RowDetailViewOption {
+    return this._addonOptions;
+  }
+
+  /** set or change some of the plugin options */
+  setOptions(options: Partial<RowDetailViewOption>): void {
+    this._addonOptions = extend(true, {}, this._addonOptions, options) as RowDetailView;
+    if (this._addonOptions?.singleRowExpand) {
+      this.collapseAll();
+    }
+  }
+
+  /** Collapse all of the open items */
+  collapseAll(): void {
+    this.dataView.beginUpdate();
+    this._expandedRowIds.forEach((itemId) => {
+      this.collapseDetailView(itemId, true);
+    });
+    this.dataView.endUpdate();
+  }
+
+  /** Collapse an Item so it is not longer seen */
+  collapseDetailView(itemId: number | string, isMultipleCollapsing = false): void {
+    const item = this.dataView.getItemById(itemId);
+    if (item) {
+      if (!isMultipleCollapsing) {
+        this.dataView.beginUpdate();
+      }
+      // Save the details on the collapse assuming onetime loading
+      if (this._addonOptions.loadOnce) {
+        this.saveDetailView(item);
+      }
+
+      item[`${this._keyPrefix}collapsed`] = true;
+      for (let idx = 1; idx <= item[`${this._keyPrefix}sizePadding`]; idx++) {
+        this.dataView.deleteItem(`${item[this._dataViewIdProperty]}.${idx}`);
+      }
+      item[`${this._keyPrefix}sizePadding`] = 0;
+      this.dataView.updateItem(item[this._dataViewIdProperty], item);
+
+      // 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]);
+      this._pendingBackToViewportRows.delete(item[this._dataViewIdProperty]);
+      this.removeOverlayPanel(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(itemId: number | string): void {
+    const item = this.dataView.getItemById(itemId);
+    if (item && !item[`${this._keyPrefix}isPadding`]) {
+      if (this._addonOptions?.singleRowExpand) {
+        this.collapseAll();
+      }
+
+      // we need to reevaluate & invalidate any row detail that are shown on top of the row that we're closing
+      this.reevaluateRenderedRowIds(item);
+
+      // a new expanded row is considered both expanded & rendered
+      item[`${this._keyPrefix}collapsed`] = false;
+      this._expandedRowIds.add(itemId);
+      this._renderedViewportRowIds.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;
+      }
+
+      // display pre-loading template
+      if (!item[`${this._keyPrefix}detailViewLoaded`] || this._addonOptions.loadOnce !== true) {
+        item[`${this._keyPrefix}detailViewLoaded`] = false;
+        item[`${this._keyPrefix}detailContent`] = this._addonOptions?.preTemplate?.(item);
+      } else {
+        this.onAsyncResponse.notify({
+          item,
+          detailView: item[`${this._keyPrefix}detailContent`],
+          grid: this._grid,
+        });
+        this.applyTemplateNewLineHeight(item);
+        this.dataView.updateItem(item[this._dataViewIdProperty], item);
+        return;
+      }
+
+      this.applyTemplateNewLineHeight(item);
+      this.dataView.updateItem(item[this._dataViewIdProperty], item);
+
+      // async server call
+      this._addonOptions.process(item);
+    }
+  }
+
+  /** Reset disposed rows while preserving mounted overlays and their viewport state. */
+  resetRenderedRows(): void {
+    // Overlay panels live outside row DOM and must remain mounted while framework adapters
+    // redraw their nested views; their viewport state is updated by the next recalc/render.
+    this._disposedRows.clear();
+  }
+
+  /** Saves the current state of the detail view */
+  saveDetailView(item: any): void {
+    if (this._addonOptions.loadOnce && item) {
+      const view = document.querySelector(`.${this.gridUid} .row-detail-${item[this._dataViewIdProperty]}`);
+      if (view) {
+        const html = view.innerHTML;
+        if (html !== undefined) {
+          item[`${this._keyPrefix}detailContent`] = html;
+        }
+      }
+    }
+  }
+
+  /**
+   * subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finished
+   * the response has to be as "args.item" with it's data back
+   */
+  handleOnAsyncResponse(e: SlickEventData, args: { item: any; detailView?: any }): void {
+    if (!args || !args.item) {
+      console.error('SlickRowDetailView plugin requires the onAsyncResponse() to supply "args.item" property.');
+      return;
+    }
+
+    // get item detail argument
+    const itemDetail = args.item;
+    const itemId = itemDetail[this._dataViewIdProperty];
+    this.beforeDetailViewRender(itemDetail);
+
+    // 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;
+    // DataView updates can be suspended by beginUpdate()/endUpdate(). Keep the response
+    // pending before updateItem() so onRowsChanged can identify when that update is
+    // released and the following grid render can safely mount the framework view.
+    this._pendingAsyncEndUpdates.set(itemId, {
+      eventData: e,
+      item: itemDetail,
+      isDataViewUpdated: false,
+    });
+    this._isUpdatingAsyncResponse = true;
+    try {
+      this.dataView.updateItem(itemDetail[this._dataViewIdProperty], itemDetail);
+    } finally {
+      this._isUpdatingAsyncResponse = false;
+    }
+    this.flushPendingAsyncEndUpdates();
+  }
+
+  /**
+   * 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.
+   * @param overrideFn: override function callback
+   */
+  expandableOverride(overrideFn: UsabilityOverrideFn): void {
+    this._expandableOverride = overrideFn;
+  }
+
+  getExpandableOverride(): UsabilityOverrideFn | null {
+    return this._expandableOverride;
+  }
+
+  /** Get the Column Definition of the first column dedicated to toggling the Row Detail View */
+  getColumnDefinition(): Column {
+    const columnId = String(this._addonOptions?.columnId ?? this._defaults.columnId);
+
+    return {
+      id: columnId,
+      field: columnId,
+      name: '',
+      alwaysRenderColumn: this._addonOptions?.alwaysRenderColumn,
+      cssClass: this._addonOptions.cssClass || '',
+      excludeFromExport: true,
+      excludeFromColumnPicker: true,
+      excludeFromGridMenu: true,
+      excludeFromQuery: true,
+      excludeFromHeaderMenu: true,
+      formatter: this.detailSelectionFormatter.bind(this),
+      reorderable: this._addonOptions.reorderable,
+      resizable: false,
+      sortable: false,
+      toolTip: this._addonOptions.toolTip,
+      width: this._addonOptions.width,
+    };
+  }
+
+  /** return the currently expanded rows */
+  getExpandedRowIds(): Array<number | string> {
+    return Array.from(this._expandedRowIds);
+  }
+
+  /** return the rows that are out of the viewport */
+  getOutOfViewportRows(): Array<number | string> {
+    return Array.from(this._rowIdsOutOfViewport);
+  }
+
+  /** Takes in the item we are filtering and if it is an expanded row returns it's parents row to filter on */
+  getFilterItem(item: any): any {
+    if (item[`${this._keyPrefix}isPadding`] && item[`${this._keyPrefix}parent`]) {
+      item = item[`${this._keyPrefix}parent`];
+    }
+    return item;
+  }
+
+  /** Resize the Row Detail View */
+  resizeDetailView(item: any): void {
+    if (!item) {
+      return;
+    }
+
+    const cellItem = document.querySelector<HTMLDivElement>(`.${this.gridUid} .row-detail-${item[this._dataViewIdProperty]}`);
+
+    if (!cellItem) {
+      return;
+    }
+
+    for (let idx = 1; idx <= item[`${this._keyPrefix}sizePadding`]; idx++) {
+      this.dataView.deleteItem(`${item[this._dataViewIdProperty]}.${idx}`);
+    }
+
+    const rowHeight = this.gridOptions.rowHeight as number; // height of a row
+    const lineHeight = 13; // we know cuz we wrote the custom css init ;)
+
+    // Measure the content independently of the panel's current height so it can also shrink.
+    const scrollTop = cellItem.scrollTop;
+    cellItem.style.height = 'auto';
+
+    const itemHeight = cellItem.scrollHeight;
+
+    // Now work out how many rows
+    const rowCount = Math.ceil(itemHeight / rowHeight);
+
+    item[`${this._keyPrefix}sizePadding`] = Math.ceil((rowCount * 2 * lineHeight) / rowHeight);
+    item[`${this._keyPrefix}height`] = itemHeight;
+
+    let outterHeight = item[`${this._keyPrefix}sizePadding`] * rowHeight;
+    if (this._addonOptions.maxRows !== undefined && item[`${this._keyPrefix}sizePadding`] > this._addonOptions.maxRows) {
+      outterHeight = this._addonOptions.maxRows! * rowHeight;
+      item[`${this._keyPrefix}sizePadding`] = this._addonOptions.maxRows;
+    }
+
+    // If the padding is now more than the original minRowBuff we need to increase it
+    if (this.gridOptions.minRowBuffer! < item[`${this._keyPrefix}sizePadding`]) {
+      // Update the minRowBuffer so that the view doesn't disappear when it's at top of screen + the original default 3
+      this.gridOptions.minRowBuffer = item[`${this._keyPrefix}sizePadding`] + 3;
+    }
+
+    cellItem.style.height = `${outterHeight}px`;
+    cellItem.scrollTop = scrollTop;
+
+    const idxParent = this.dataView.getIdxById(item[this._dataViewIdProperty]) as number;
+    for (let idx = 1; idx <= item[`${this._keyPrefix}sizePadding`]; idx++) {
+      this.dataView.insertItem(idxParent + idx, this.getPaddingItem(item, idx));
+    }
+
+    // Lastly save the updated state
+    this.saveDetailView(item);
+  }
+
+  /**
+   * Hide any expanded Row Detail whose parent row is no longer part of the (filtered) DataView, without collapsing it,
+   * so that it reopens automatically once the parent row is back in the filtered/sorted dataset.
+   * Runs synchronously off DataView events, ahead of any framework-specific "onFilterChanged" redraw, to avoid removing
+   * a Row Detail container while a framework adapter is in the middle of (re)rendering into it.
+   */
+  protected hideRowDetailsForFilteredOutParents(): void {
+    this._expandedRowIds.forEach((itemId) => {
+      if (this._renderedViewportRowIds.has(itemId) && this.dataView.getRowById(itemId) === undefined) {
+        this.notifyViewportChange(this.dataView.getItemById(itemId) ?? {}, 'remove', true);
+      }
+    });
+  }
+
+  /**
+   * (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
+   * @param {Boolean} [renderPanels] - skip the extra positioning pass when scrolling relies on the grid render
+   */
+  recalculateOutOfRangeViews(triggerEvent = true, delay?: number, renderPanels = true): void {
+    clearTimeout(this._backViewportTimer);
+
+    const calculateFn = () =>
+      this._expandedRowIds.forEach((itemId) => {
+        const item = this.dataView.getItemById(itemId) ?? {};
+        const rowIdx = this.dataView.getRowById(itemId) as number | undefined;
+
+        // the parent row no longer exists in the (filtered) DataView, hide its Row Detail without collapsing it
+        // so that it can reopen automatically once the parent row is back in the filtered dataset
+        if (rowIdx === undefined) {
+          if (this._renderedViewportRowIds.has(itemId)) {
+            this.notifyViewportChange(item, 'remove', triggerEvent);
+          }
+          return;
+        }
+
+        const cachedRows = Object.keys(this._grid.getRowCache()).map(Number);
+
+        const visible = this._grid.getRenderedRange();
+        // the grid hasn't rendered a viewport yet (e.g. very first data load), nothing to add/remove based on scroll position
+        if (!visible) {
+          return;
+        }
+        const rowDetailCount = item[`${this._keyPrefix}sizePadding`] || 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;
+        // extend startRow to include row header when any part of the detail panel rows is visible
+        if (startRow > rowIdx && rdEndRow >= this._visibleRenderedCell!.startRow) {
+          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)) ||
+          (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();
+    }
+
+    if (renderPanels) {
+      this.renderOverlayPanels();
+    }
+  }
+
+  // --
+  // protected functions
+  // ------------------
+
+  /** Framework adapters can synchronously dispose their preload/current view before SlickGrid replaces its template. */
+  protected beforeDetailViewRender(_item: any): void {}
+
+  /** Framework adapters can mount their view after SlickGrid rendered. */
+  protected renderDetailView(_item: any): void | Promise<void> {}
+
+  /** Complete pending async responses only after SlickGrid has finished its actual render cycle. */
+  protected flushPendingAsyncEndUpdates(): void {
+    for (const [itemId, { eventData, item, isDataViewUpdated }] of this._pendingAsyncEndUpdates) {
+      if (!isDataViewUpdated) {
+        continue;
+      }
+      this._pendingAsyncEndUpdates.delete(itemId);
+      this._renderedIds.add(itemId);
+      this.refreshOverlayPanel(item);
+
+      const renderResult = this.renderDetailView(item);
+      const notifyAsyncEndUpdate = () =>
+        this.onAsyncEndUpdate.notify(
+          {
+            grid: this._grid,
+            item,
+          },
+          eventData,
+          this
+        );
+
+      if (renderResult instanceof Promise) {
+        void renderResult.then(notifyAsyncEndUpdate);
+      } else {
+        notifyAsyncEndUpdate();
+      }
+    }
+  }
+
+  /** Render all expanded panels in sibling overlay layers of their grid canvases. */
+  protected renderOverlayPanels(): void {
+    if (!this._grid) {
+      return;
+    }
+
+    this._expandedRowIds.forEach((itemId) => {
+      if (!this._renderedViewportRowIds.has(itemId)) {
+        return;
+      }
+
+      const item = this.dataView.getItemById(itemId);
+      const row = this.dataView.getRowById(itemId);
+      if (!item || row === undefined) {
+        return;
+      }
+
+      const columnIdx = this._grid.getColumnIndex(String(this._addonOptions.columnId ?? this._defaults.columnId));
+      const viewport = this._grid.getViewportNode(columnIdx, row);
+      const canvas = viewport?.querySelector<HTMLDivElement>('.grid-canvas');
+      if (!canvas) {
+        return;
+      }
+
+      let panel = this._overlayPanels.get(itemId);
+      const wasPanelCreated = !panel;
+      if (!panel) {
+        panel = this.createDetailViewElement(item, row);
+        this._overlayPanels.set(itemId, panel);
+      }
+
+      if (panel.parentElement !== canvas) {
+        canvas.appendChild(panel);
+      }
+      this.updateOverlayPanelPosition(panel, item, row);
+
+      // A scroll-back can finish after the grid has rendered its rows. Notify framework
+      // adapters only after the overlay container exists so they can safely remount views.
+      if (wasPanelCreated && this._rowIdsOutOfViewport.has(itemId)) {
+        this.notifyBackToViewportWhenDomExist(item);
+      }
+    });
+  }
+
+  /** Remove all mounted and detached detail panels. */
+  protected disposeOverlayPanels(): void {
+    this._overlayPanels.forEach((panel) => panel.remove());
+    this._overlayPanels.clear();
+  }
+
+  /** Remove one panel without disturbing other expanded Row Details. */
+  protected removeOverlayPanel(itemId: number | string): void {
+    const panel = this._overlayPanels.get(itemId);
+    panel?.remove();
+    this._overlayPanels.delete(itemId);
+  }
+
+  /** Replace a framework-owned overlay panel after its preload component is unmounted. */
+  protected refreshOverlayPanel(item: any): void {
+    if (!item) {
+      return;
+    }
+
+    const itemId = item[this._dataViewIdProperty];
+    const panel = this._overlayPanels.get(itemId);
+    if (!panel) {
+      this.renderOverlayPanels();
+      return;
+    }
+
+    // Keep the outer panel node stable while a framework adapter transitions from
+    // its preload component to the real detail component. Replacing the panel
+    // itself can detach a React/Vue/Angular tree in the middle of its commit.
+    this.renderDetailContent(panel, item);
+
+    const row = this.dataView.getRowById(itemId);
+    if (row !== undefined) {
+      this.updateOverlayPanelPosition(panel, item, row);
+    }
+  }
+
+  /** Keep an existing overlay aligned after row heights or data-view positions change. */
+  protected updateOverlayPanelPosition(panel: HTMLDivElement, item: any, row: number): void {
+    const top = this.getDetailPanelTopOffset(row);
+    let outterHeight = 0;
+    for (let offset = 1; offset <= (item[`${this._keyPrefix}sizePadding`] || 0); offset++) {
+      outterHeight += this._grid.getRowHeight(row + offset);
+    }
+    panel.style.top = `${top}px`;
+    panel.style.height = `${outterHeight}px`;
+    const canvas = panel.parentElement;
+    if (canvas) {
+      const viewport = canvas.parentElement!;
+      panel.style.transform = `translateX(${viewport.getBoundingClientRect().left - canvas.getBoundingClientRect().left}px)`;
+      panel.style.width = `${viewport.clientWidth}px`;
+    }
+  }
+
+  /** Follow the reserved padding rows even when the parent is docked elsewhere. */
+  protected getDetailPanelTopOffset(row: number): number {
+    const columnIdx = this._grid.getColumnIndex(String(this._addonOptions.columnId ?? this._defaults.columnId)) ?? 0;
+    return this._grid.getCellNodeBox(row + 1, columnIdx)?.top ?? this._grid.getRowTop(row + 1);
+  }
+
+  /** Render or replace the detail content inside a panel container. */
+  protected renderDetailContent(container: HTMLElement, item: any): void {
+    const detailContent = item[`${this._keyPrefix}detailContent`];
+    if (detailContent instanceof HTMLElement) {
+      container.replaceChildren(detailContent);
+    } else {
+      container.innerHTML = this._grid.sanitizeHtmlString(detailContent);
+    }
+  }
+
+  /** Create the Row Detail panel DOM without deciding where it is mounted. */
+  protected createDetailViewElement(dataContext: any, _row: number): HTMLDivElement {
+    const cellDetailContainerElm = createDomElement('div', {
+      className: `slick-row-detail-container row-detail-${dataContext[this._dataViewIdProperty]}`,
+      style: {
+        boxSizing: 'border-box',
+        pointerEvents: 'auto',
+      },
+    });
+    this.renderDetailContent(cellDetailContainerElm, dataContext);
+    return cellDetailContainerElm;
+  }
+
+  /**
+   * create the row detail ctr node. this belongs to the dev & can be custom-styled as per
+   * @param {Object} item
+   */
+  protected applyTemplateNewLineHeight(item: any): void {
+    // the height is calculated by the template row count (how many line of items does the template view have)
+    const rowCount = this._addonOptions.panelRows;
+
+    // calculate padding requirements based on detail-content..
+    // ie. worst-case: create an invisible dom node now & find it's height.
+    const lineHeight = 13; // we know cuz we wrote the custom css init ;)
+    item[`${this._keyPrefix}sizePadding`] = Math.ceil((rowCount * 2 * lineHeight) / this.gridOptions.rowHeight!);
+    if (this._addonOptions.maxRows !== undefined) {
+      item[`${this._keyPrefix}sizePadding`] = Math.min(item[`${this._keyPrefix}sizePadding`], this._addonOptions.maxRows);
+    }
+    item[`${this._keyPrefix}height`] = item[`${this._keyPrefix}sizePadding`] * this.gridOptions.rowHeight!;
+    const idxParent = this.dataView.getIdxById(item[this._dataViewIdProperty]);
+    for (let idx = 1; idx <= item[`${this._keyPrefix}sizePadding`]; idx++) {
+      this.dataView.insertItem((idxParent || 0) + idx, this.getPaddingItem(item, idx));
+    }
+  }
+
+  protected notifyViewportChange(item: any, action: 'add' | 'remove', triggerEvent = true): void {
+    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);
+        this._pendingBackToViewportRows.delete(itemId);
+        if (this._addonOptions.keepComponentAlive) {
+          this._overlayPanels.get(itemId)?.remove();
+        } else {
+          this.removeOverlayPanel(itemId);
+        }
+        triggerEvent && this.notifyOutOfViewport(item);
+      }
+    }
+  }
+
+  protected checkExpandableOverride(row: number, dataContext: any, grid: SlickGrid): boolean {
+    if (dataContext?.[`${this._keyPrefix}isPadding`]) {
+      return false;
+    }
+    if (typeof this._expandableOverride === 'function') {
+      return this._expandableOverride(row, dataContext, grid);
+    }
+    return true;
+  }
+
+  /** Get the Row Detail padding (which are the rows dedicated to the detail panel) */
+  protected getPaddingItem(parent: any, offset: any): any {
+    const item: any = {};
+    const setItemProperty = (property: string, value: any) => {
+      Object.defineProperty(item, property, { configurable: true, enumerable: true, writable: true, value });
+    };
+
+    // to make it work with Grouping,
+    // copy the parent's columns field values so that padding rows can follow the parent's group and be filtered/sorted with it
+    this._grid.getColumns().forEach(({ field }) => {
+      setItemProperty(field, parent[field]);
+    });
+
+    setItemProperty(this._dataViewIdProperty, `${parent[this._dataViewIdProperty]}.${offset}`);
+
+    // additional hidden padding metadata fields
+    setItemProperty(`${this._keyPrefix}collapsed`, true);
+    setItemProperty(`${this._keyPrefix}isPadding`, true);
+    setItemProperty(`${this._keyPrefix}parent`, parent);
+    setItemProperty(`${this._keyPrefix}offset`, offset);
+
+    return item;
+  }
+
+  /** The Formatter of the toggling icon of the Row Detail */
+  protected detailSelectionFormatter(
+    row: number,
+    _cell: number,
+    _val: any,
+    _colDef: Column,
+    dataContext: any,
+    grid: SlickGrid
+  ): FormatterResultWithHtml | HTMLElement | '' {
+    if (!this.checkExpandableOverride(row, dataContext, grid)) {
+      return '';
+    }
+
+    if (dataContext[`${this._keyPrefix}collapsed`] === undefined) {
+      dataContext[`${this._keyPrefix}collapsed`] = true;
+      dataContext[`${this._keyPrefix}sizePadding`] = 0; // the required number of pading rows
+      dataContext[`${this._keyPrefix}height`] = 0; // the actual height in pixels of the detail field
+      dataContext[`${this._keyPrefix}isPadding`] = false;
+      dataContext[`${this._keyPrefix}parent`] = undefined;
+      dataContext[`${this._keyPrefix}offset`] = 0;
+    }
+
+    if (dataContext[`${this._keyPrefix}collapsed`]) {
+      let collapsedClasses = `sgi ${this._addonOptions.cssClass || ''} expand `;
+      if (this._addonOptions.collapsedClass) {
+        collapsedClasses += this._addonOptions.collapsedClass;
+      }
+      return createDomElement('div', { className: classNameToList(collapsedClasses).join(' '), ariaExpanded: 'false' });
+    }
+
+    let expandedClasses = `sgi ${this._addonOptions.cssClass || ''} collapse `;
+    if (this._addonOptions.expandedClass) {
+      expandedClasses += this._addonOptions.expandedClass;
+    }
+
+    return {
+      html: createDomElement('div', { className: classNameToList(expandedClasses).join(' '), ariaExpanded: 'true' }),
+    };
+  }
+
+  /** When row is getting toggled, we will handle the action of collapsing/expanding */
+  protected handleAccordionShowHide(item: any): void {
+    if (item) {
+      const itemId = item[this._dataViewIdProperty];
+      if (!item[`${this._keyPrefix}collapsed`]) {
+        this.collapseDetailView(itemId);
+      } else {
+        this.expandDetailView(itemId);
+      }
+    }
+  }
+
+  /** Handle keyboard a11y for row detail toggle: Space, ArrowRight (expand), ArrowLeft (collapse). */
+  protected handleKeyDown(e: SlickEventData): void {
+    const key = e.key;
+    const activeCell = this._grid.getActiveCell();
+    const isSupportedKey = key === ' ' || key === 'ArrowRight' || key === 'ArrowLeft';
+    if (isSupportedKey && activeCell && !this._grid.getEditorLock()?.isActive()) {
+      const dataContext = this._grid.getDataItem(activeCell.row);
+      if (this.checkExpandableOverride(activeCell.row, dataContext, this._grid)) {
+        const column = this._grid.getColumnByIdx(activeCell.cell);
+        const isTogglerCell = this._addonOptions.useRowClick || column?.id === this._addonOptions.columnId;
+        const isCollapsed = !!dataContext[`${this._keyPrefix}collapsed`];
+        const isValidDirection = !(key === 'ArrowRight' && !isCollapsed) && !(key === 'ArrowLeft' && isCollapsed);
+
+        if (isTogglerCell && isValidDirection) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          this.toggleRowSelection(activeCell.row, dataContext);
+        }
+      }
+    }
+  }
+
+  /** Handle mouse click event */
+  protected handleClick(e: SlickEventData, args: { row: number; cell: number }): void {
+    const dataContext = this._grid.getDataItem(args.row);
+
+    if (this.checkExpandableOverride(args.row, dataContext, this._grid)) {
+      // clicking on a row select checkbox
+      const column = this._grid.getColumnByIdx(args.cell);
+      // prettier-ignore
+      if (this._addonOptions.useRowClick || (column && column.id === this._addonOptions.columnId && e.target!.classList.contains(this._addonOptions.cssClass || ''))) {
+        // if editing, try to commit
+        if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          return;
+        }
+
+        // trigger an event before toggling
+        // user could cancel the Row Detail opening when event is returning false
+        if (
+          this.onBeforeRowDetailToggle
+            .notify({ grid: this._grid, item: dataContext }, e, this, true) // last argument is to ignore click event might return false from Row Selection canCellBeActive() validation
+            .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: any[] = [];
+        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.notifyBeforeOutOfViewport(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._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();
+      }
+    }
+  }
+
+  /** Triggered when a one or all data Groups are collapsed */
+  protected handleGroupCollapsed(groupingKey: number | string | null): void {
+    if (groupingKey) {
+      this.getGroupItemIds(groupingKey).forEach((rowId) => {
+        if (this._renderedViewportRowIds.has(rowId)) {
+          const item = this.dataView.getItemById(rowId);
+          this.notifyBeforeOutOfViewport(item);
+          this.notifyViewportChange(item, 'remove');
+        }
+      });
+    } else {
+      // no grouping key means all groups are being collapsed
+      this._expandedRowIds.forEach((rowId) => {
+        this._renderedCollapsedGroupIds.add(rowId);
+        const item = this.dataView.getItemById(rowId);
+        this.notifyBeforeOutOfViewport(item);
+        this.notifyViewportChange(item, 'remove');
+      });
+      this._expandedRowIds.clear();
+    }
+  }
+
+  /** Triggered when a one or all data Groups are expanded */
+  protected handleGroupExpanded(groupingKey: number | string | null): void {
+    if (groupingKey) {
+      this.getGroupItemIds(groupingKey).forEach((rowId) => {
+        if (this._expandedRowIds.has(rowId)) {
+          this.notifyViewportChange(this.dataView.getItemById(rowId), 'add');
+        }
+      });
+    } else {
+      // no grouping key means all groups are being expanded
+      this._renderedCollapsedGroupIds.forEach((rowId) => {
+        this._expandedRowIds.add(rowId);
+      });
+      this.recalculateOutOfRangeViews(true, 0);
+      this._renderedCollapsedGroupIds.clear();
+    }
+  }
+
+  protected handleRemoveRow(rowIndex: number): void {
+    const item = this.dataView.getItemByIdx(rowIndex);
+
+    if (item) {
+      const rowId = item[this.dataViewIdProperty];
+
+      if (this._expandedRowIds.has(rowId)) {
+        this.notifyBeforeOutOfViewport(item, rowIndex);
+        this._disposedRows.add(rowIndex);
+      }
+    }
+  }
+
+  /** Let framework adapters release views before a detail row leaves the rendered range. */
+  protected notifyBeforeOutOfViewport(item: any, rowIndex?: number): void {
+    if (!item) {
+      return;
+    }
+
+    const rowId = item[this._dataViewIdProperty];
+
+    this.onBeforeRowOutOfViewportRange.notify(
+      {
+        grid: this._grid,
+        item,
+        rowId,
+        rowIndex: rowIndex ?? item.rowIndex ?? this.dataView.getRowById(rowId),
+        expandedRows: Array.from(this._expandedRowIds).map((id) => this.dataView.getItemById(id)),
+        rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, true)),
+      },
+      null,
+      this
+    );
+  }
+
+  /** Get the item IDs of the Row Details that are expanded and under a specific Group */
+  protected getGroupItemIds(groupingKey: string | number): Array<number | string> {
+    return (
+      this.dataView
+        .getItemsByGroupingKey(groupingKey)
+        .filter((item) => !item[`${this._keyPrefix}isPadding`])
+        .map((item) => item[this._dataViewIdProperty]) || []
+    );
+  }
+
+  protected notifyOutOfViewport(item: any): void {
+    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._expandedRowIds).map((id) => this.dataView.getItemById(id)),
+        rowIdsOutOfViewport: Array.from(this.syncOutOfViewportArray(rowId, true)),
+      },
+      null,
+      this
+    );
+  }
+
+  protected notifyBackToViewportWhenDomExist(item: any): void {
+    const rowIndex = item.rowIndex || this.dataView.getRowById(item[this._dataViewIdProperty]);
+    const rowId = item[this.dataViewIdProperty];
+
+    this.renderOverlayPanels();
+
+    // make sure View Row DOM Element really exist before notifying that it's a row that is visible again
+    if (document.querySelector(`.${this.gridUid} .row-detail-${item[this._dataViewIdProperty]}`)) {
+      this._pendingBackToViewportRows.delete(rowId);
+      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
+      );
+    } else {
+      this._pendingBackToViewportRows.set(rowId, item);
+    }
+  }
+
+  /**
+   * 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
+   */
+  protected reevaluateRenderedRowIds(item: any): void {
+    // get current item row index
+    const rowIdx = this.dataView.getRowById(item[this._dataViewIdProperty]) as number;
+    this._renderedViewportRowIds.forEach((rid) => {
+      const invRowIdx = this.dataView.getRowById(rid);
+      if (invRowIdx !== undefined && invRowIdx > rowIdx) {
+        this.notifyViewportChange(this.dataView.getItemById(rid), 'remove');
+      }
+    });
+  }
+
+  protected syncOutOfViewportArray(rowId: number | string, isAdding: boolean): Set<string | number> {
+    const hasRowId = this._rowIdsOutOfViewport.has(rowId);
+
+    if (isAdding && !hasRowId) {
+      this._rowIdsOutOfViewport.add(rowId);
+    } else if (!isAdding && hasRowId) {
+      this._rowIdsOutOfViewport.delete(rowId);
+    }
+    return this._rowIdsOutOfViewport;
+  }
+
+  protected toggleRowSelection(rowNumber: number, dataContext: any): void {
+    if (this.checkExpandableOverride(rowNumber, dataContext, this._grid)) {
+      this.dataView.beginUpdate();
+      this.handleAccordionShowHide(dataContext);
+      this.dataView.endUpdate();
+    }
+  }
+}