Row Detail Plugin - Official approach for rendering Angular components in v10.x (standalone)?

[himanshubhayani131313]

Context

We are migrating a large enterprise Angular application from Infragistics (IgxHierarchicalGrid with IgxRowIsland) to Angular-Slickgrid. We have ~31 grid components, of which 28 work perfectly with Angular-Slickgrid (flat grids, tree grids, remote paging, filtering, sorting — all excellent).

However, we have 3 components that require a grid-inside-grid (hierarchical) pattern — where expanding a parent row shows a completely separate child grid with different columns and its own data source.

What We're Trying To Do

Use the Row Detail plugin to render a full angular-slickgrid instance inside the expanded detail panel of another angular-slickgrid instance. Essentially: parent grid → expand row → child Angular Slickgrid grid with different columns/data.

What We've Done

We have a working POC where the child grid does render inside the Row Detail panel. However, we're experiencing stability issues:

Issue	Description
Collapse icon unreliable	Clicking the minus (−) icon to collapse doesn't always work. Sometimes requires clicking the row checkbox first.
Row shifting on expand	When row 1 is expanded, row 2's data shifts because the plugin inserts padding rows into the DataView
Scroll instability	With multiple expanded rows, scrolling becomes janky — virtual scroll assumes fixed row heights
Re-rendering flash	Occasionally shows blank space before the child grid appears

What We've Tried

1. enableRowDetailView: true with custom component rendering — child renders but collapse/shift issues
2. loadOnce: true — prevented collapse from working
3. loadOnce: false with immediate Promise resolve — collapse works but triggers re-render
4. singleRowExpand: true — avoids multi-expand instability but limits functionality
5. rowTopOffsetRenderType: 'top' — partial improvement on row shifting
6. MutationObserver to detect DOM changes and re-render — added complexity, didn't solve root cause
7. onBeforeRowDetailToggle to destroy component on collapse — clean lifecycle but didn't fix collapse icon
8. onRowBackToViewportRange for scroll-back re-render — handles scroll case but not core issues

Root Cause (Our Understanding)

The Row Detail plugin inserts "padding rows" into the DataView to create vertical space, then renders custom content into that space. When the content is a full Angular Slickgrid instance (with its own virtual scroll, DataView, and DOM management), the two virtual scroll systems conflict. The parent grid's row invalidation cycle destroys and recreates the detail panel DOM, which kills the child Angular component.

Our Understanding of the v10.x History

In older versions (v4–v8), the AngularRowDetailView class was built into the library with deep integration into Angular's ViewContainerRef and the library's internal rendering pipeline. In v10.x (the @slickgrid-universal monorepo refactor), this Angular-specific rendering was not carried forward because the architecture became framework-agnostic.

Questions

1. Is there an official or recommended approach for rendering Angular components (specifically another angular-slickgrid instance) inside the Row Detail panel in v10.x?
2. Is the old AngularRowDetailView pattern something that could be reintroduced, or is there a different recommended architecture for this use case?
3. If embedding a nested grid inside Row Detail is not supported/recommended, is there an alternative pattern you'd suggest for "grid-inside-grid with different columns"?
4. Would you accept a PR if we developed a stable solution for this?

Environment

• Angular version: [your version, e.g. 17.x or 18.x]
• angular-slickgrid version: [your version, e.g. 10.x]
• @slickgrid-universal packages version: [your version]
• Browser: Chrome (latest)

Why This Matters To Us

This is the only remaining blocker for our migration. 28 of 31 grid components work perfectly with Angular-Slickgrid. We have a workaround (HTML table parent + Slickgrid child), but we'd prefer a pure Angular-Slickgrid solution if one is feasible.

Thank you for the incredible library — it's been the best free option we've evaluated by a significant margin.

[ghiscoding]

I've asked copilot to review your concerns and created PR #2653, it added a new flag keepComponentAliveOnOutOfViewport to Row Detail. You can use the pkg.pr.new to test it out (which seems to fail at the moment, so it didn't create the links yet it's ok now)

I'd like to clarify a few things you wrote

• collapse icon clicking, note that it's actually the cell clicking that has the listener (in other words, clicking anywhere in the screen would do the same).
• loadOnce was added by another user in the original SlickGrid, it might work better with plain html (which was the case in SlickGrid) but maybe less with Angular-Slickgrid (just an assumption though)
• your v10 history is slightly wrong, the behavior is exactly the same as before but what is different is to make the Row Detail optional. Also for Angular-Slickgrid, another big change was to switch to standalone components and more focus on Signals, but that shouldn't impact Row Detail that much. Mainly v10 made the Row Detail as optional requiring a separate install because not that many people use this feature.
• how the Row Detail actually works is to push certain amount of rows by X rows (whatever you define as height), then blank that background and paint the Row Detail on top of it.
• the new PR is adding a new flag to avoid re-rendering the Row Detail every time from scratch (which was previously the case), it's an opt-in flag that copilot added and it seems correct to me. I mostly ask copilot (using Claude Sonnet 4.6) to fix it all, I barely only provided guidance and ask it to also modify the Example 45 and add some Cypress tests to make sure it works (and it's a good thing I did because at first it assumed wrongly that it was working when in fact it wasn't, so the addition Cypress tests were great to validate the new flag behavior as well)

Also for reference, I've asked copilot to work on this and its first reply seemed more like an answer to you (the next few prompts eventually fixed some of your issues), so this first copilot reply could be useful reading to you:

---

Thanks for the detailed write-up! A few corrections and answers:

Correcting the v10.x history

Your understanding of what changed in v10 is slightly off. The AngularRowDetailView class was always a thin Angular-specific wrapper built on top of @slickgrid-universal/row-detail-view-plugin — it was never deep-magic with a private rendering pipeline. The only thing that changed in v10 is that it was extracted out of the angular-slickgrid core bundle (where it was always included in v9 and below) and made an optional separate install via @slickgrid-universal/angular-row-detail-plugin. The code and Angular integration (AngularUtilService, ViewContainerRef, proper component lifecycle) are unchanged and still fully present.

Answers to your questions

1. Official approach for rendering Angular components in v10.x?
Install and use @slickgrid-universal/angular-row-detail-plugin:

npm install @slickgrid-universal/angular-row-detail-plugin

Then in your grid options:

import { AngularRowDetailView } from '@slickgrid-universal/angular-row-detail-plugin';

gridOptions = {
  enableRowDetailView: true,
  externalResources: [AngularRowDetailView],
  rowDetailView: {
    process: (item) => this.http.get(`api/item/${item.id}`),
    preloadComponent: MyPreloadComponent,
    viewComponent: MyDetailComponent,   // ← full Angular component, properly lifecycle-managed
    parentRef: this
  }
};

See demo and doc.

2. Is AngularRowDetailView still available?
Yes, see above. It properly creates and destroys Angular components via AngularUtilService.createAngularComponentAppendToDom().

3. Embedding a nested grid — tips for your specific issues

Your stability issues are not due to missing Angular integration — they're the inherent challenge of nesting two virtual-scroll systems. Some tips:

• Re-rendering flash / component recreate on scroll: By design, the plugin destroys the component when its row goes out of viewport (to free memory) and recreates it when it returns. For a heavy child grid this is expensive. You can mitigate it by increasing minRowBuffer on the parent grid (e.g. minRowBuffer: 20) so the row detail stays rendered longer before being torn down.
• Row shifting / wrong panel height: The panelRows option uses a static estimate. For a dynamic child grid you must call rowDetailInstance.resizeDetailView(item) after the child grid finishes its first render, so the plugin recalculates the actual pixel height and inserts the right number of padding rows.
• Collapse icon unreliable: Make sure useRowClick: false so only the explicit +/− toggle icon responds — a nested grid swallows click events across the whole row. Also avoid loadOnce: true with component-based details (it saves innerHTML, not the component reference).
• Scroll jank with multiple expanded rows: Use singleRowExpand: true while investigating — it limits you to one open row and removes multi-expand complexity.
• Child grid destroying parent scroll: Set a fixed height on the child grid container element (e.g. style="height: 300px") rather than letting it auto-size, so it doesn't fight the parent's layout.

4. Would a PR be welcome?
Absolutely — a PR demonstrating a stable nested-grid Row Detail example (even just in the demo app) would be a great addition.

[ghiscoding]

The pkg.pr.new finally worked, so you can test it out live (before I release it at the end of this week), so if you have time to test it out and confirm that it helps then that would be great before merging/releasing the PR. You'll likely need to install these packages, that got modified in this PR, to test it out:

• angular-slickgrid
• @slickgrid-universal/angular-row-detail-plugin
• @slickgrid-universal/common
• @slickgrid-universal/utils

Summary

That's pretty much the best I could do at this point and I don't want to spend more AI tokens on this. This feature is a little hard to be super snappy but hopefully the upcoming PR and new flag will help at the expense of maybe using slightly more memory (which is probably peanut)

Also just to mention, SlickGrid has always been a JavaScript library at its core, I created Angular-Slickgrid (and other framework) as wrapper on top of SlickGrid, but again SlickGrid is still a JS library at its core and will never be an Angular native lib (or any other framework). So you have to work around this fact and try to use more native JS code rather than Angular code as much as possible (e.g. prefer native code in Custom Formatters, Editors, Filters, etc...). Of course, Row Detail is an exception and it does work with Angular Component but it's still wrapped around the fact that it's a JS lib (and actually the fact that SlickGrid is actually its strength, it super snappy and works great with large dataset... but yeah Row Detail is an exception and I worked hard on making it better but there's a limit to what we can achieve and so just keep that in mind).

Also a side note, even though I helped built this Row Detail plugin, I never actually used it in any project myself. I had some ideas in mind but never got time to work with it yet. In our project, we rather opted to display a small grid + details on a side bar (on the right) that could be open/collapsed on row click, there's a similar concept with Master/Detail grids (see Example 50) but I agree that both of these approaches take a bit more spaces to render compared to Row Detail

[ghiscoding]

I also asked about what you mentioned about virtual scroll issue and it replied that isn't any issue but something to keep in mind when using inner grids

For nested SlickGrid inside a Row Detail: the actual calculation conflict is different — it's not that the virtual scroll math is wrong, it's that grid.onScroll events from the inner grid can bubble up to the outer grid's container, triggering recalculateOutOfRangeViews on every inner scroll. This is just a performance concern, not a correctness bug. The fix (if needed) is to stopPropagation() on scroll events at the inner grid's container boundary.

So short answer: no calculation bug from padding rows; the only real issue with nested grids is scroll event bubbling causing extra (harmless but wasteful) recalculations.

[himanshubhayani131313]

@ghiscoding Thanks for the quick turnaround on PR #2653 and the detailed guidance! I've spent considerable time testing all the suggestions. Here's my complete findings:

---

Environment

• Angular: 21.2.5
• angular-slickgrid: installed from pkg.pr.new (PR feat: add keepComponentAlive to all 4 framework Row Detail plugins #2653)
• @slickgrid-universal/angular-row-detail-plugin: installed from pkg.pr.new (PR feat: add keepComponentAlive to all 4 framework Row Detail plugins #2653)
• @slickgrid-universal/common: installed from pkg.pr.new (PR feat: add keepComponentAlive to all 4 framework Row Detail plugins #2653)
• @slickgrid-universal/utils: installed from pkg.pr.new (PR feat: add keepComponentAlive to all 4 framework Row Detail plugins #2653)
• OS: Windows 11, Chrome latest
• Child component: A standalone Angular component containing another <angular-slickgrid> instance (different columns, different data)

---

What I Tested (Step by Step)

I went through multiple iterations, progressively simplifying my code to isolate the issue. Here's what I tried:

Attempt 1 — Applied all your recommended fixes

Applied every fix from your response:

• useRowClick: false
• minRowBuffer: 20
• keepComponentAliveOnOutOfViewport: true (later corrected to keepComponentAlive: true)
• resizeDetailView(item) called from child after render
• stopPropagation() on inner grid scroll events
• Fixed height (250px) on child grid container (no autoHeight)
• Removed custom preTemplate/postTemplate (let the plugin generate its own containers)
• Switched from my custom AngularRowDetailView to the official @slickgrid-universal/angular-row-detail-plugin

Result: Child grid was invisible (blank space where it should render). Collapse didn't work at all.

Root cause found: My custom preTemplate/postTemplate were overriding the plugin's internal container elements (container_${id} / container_loading). Removing them fixed the rendering.

Attempt 2 — Official plugin, all fixes applied, no custom templates

After removing preTemplate/postTemplate:

• Child grid now renders ✅
• But collapse still requires two clicks — first click destroys the component (blank space remains), second click actually collapses the row ❌
• keepComponentAlive: true caused duplicate child grid headers when expanding a different row ❌

Attempt 3 — Removed keepComponentAlive, tried useRowClick: true

• useRowClick: true — clicking any cell triggers expand/collapse, which means clicking a checkbox to select a row also toggles the detail view — making row selection impossible ❌
• Collapse still requires two clicks ❌

Attempt 4 — Stripped everything to absolute minimum

Removed ALL customizations. Bare minimum config:

parentGridOptions = {
  enableAutoResize: true,
  enableFiltering: true,
  enableSorting: true,
  enableCheckboxSelector: true,
  enableCellNavigation: true,
  enableColumnReorder: true,
  enableExcelCopyBuffer: true,
  multiSelect: true,
  rowHeight: 30,
  headerRowHeight: 32,
  showHeaderRow: true,
  enablePagination: true,
  pagination: { pageSizes: [10, 15, 25, 50], pageSize: 25 },
  enableRowDetailView: true,
  rowDetailView: {
    process: (item) => Promise.resolve(item),
    viewComponent: HierarchicalChildGridComponent,
    loadOnce: true,
    singleRowExpand: true,
    panelRows: 8,
    parentRef: this,
    collapseAllOnSort: true,
    useRowClick: false
  },
  externalResources: [AngularRowDetailView],
  checkboxSelector: { hideInFilterHeaderRow: true, hideInColumnTitleRow: false }
};
Child component — simplest possible:

@Component({ standalone: true, encapsulation: ViewEncapsulation.None })
export class HierarchicalChildGridComponent implements OnInit {
  @Input() model: any;
  @Input() addon: any;
  @Input() grid: any;
  @Input() dataView: any;
  @Input() parentRef: any;

  childGridOptions = {
    enableAutoResize: false,
    gridHeight: 250,
    gridWidth: 800,
    enableFiltering: true,
    enableSorting: true,
    enableCheckboxSelector: true,
    rowHeight: 30,
    headerRowHeight: 32,
    showHeaderRow: true,
    enablePagination: false
  };
  // ... columns and data loading
}
Result: Same issues persist. Expand works. Collapse requires two clicks. This confirms it's not my configuration.

The Consistent Behavior (All Attempts)
Step	Action	Expected	Actual
1	Click + icon on row 1	Row expands, child grid renders	✅ Works
2	Click − icon on row 1	Row collapses immediately	❌ Child component destroyed but blank space remains
3	Click − icon again	—	Row finally collapses (padding rows removed)
4	Expand row 1, then expand row 2	Row 1 collapses, row 2 expands (singleRowExpand)	⚠️ Sometimes works, sometimes shows artifacts
My Analysis of the Root Cause
Looking at the source code of SlickRowDetailView.handleClick():

First click on −: handleAccordionShowHide fires → item.__collapsed is false (expanded) → calls collapseDetailView(itemId)
In the Angular plugin: handleOnBeforeRowDetailToggle also fires → sees !item.__collapsed → disposes the Angular component
But after the component is destroyed, the padding rows remain in the DataView — the collapseDetailView doesn't fully remove them on the same cycle
Second click: now item.__collapsed is in an intermediate state, the second toggle finally removes the padding rows
It seems like the Angular component disposal (which happens synchronously in onBeforeRowDetailToggle) interferes with the subsequent collapseDetailView logic that removes padding rows from the DataView.

Questions
Is there a working example somewhere of Row Detail with a full Angular SlickGrid as the child content (not just static HTML)? The current Example 45 demo appears to use simple template content, not a nested grid.

Could the onBeforeRowDetailToggle subscriber in AngularRowDetailView (which disposes the component) be causing a race condition with collapseDetailView (which removes padding rows)? They both fire on the same click but have different effects on the DOM.

Would it help if I create a minimal reproduction repo on GitHub? Happy to do so.

What Works Perfectly (for context)
All flat grid features work flawlessly — filtering, sorting, remote paging, clipboard, selection, column reorder. The Row Detail expand also works. It's specifically the collapse and re-expand behavior that's broken when the detail content is a dynamic Angular component containing its own SlickGrid instance.

We're migrating from Infragistics IgxHierarchicalGrid (which handles this natively with Row Islands) and Angular-Slickgrid is our top choice for the 90% of grids that are flat/tree. This nested grid use case is the one remaining blocker for 3 of our 31 components.

Appreciate your time on this

[ghiscoding]

Since you never provided a full reproduction of your issue (a working demo/repo), I can't really help any further, I have 3 Row Detail examples in all frameworks and all Cypress tests are passing fine and they all behave like they should. Example 45 is probably closer to what you're trying to do and again that demo is working fine. I'm going to merge the PR and release at the end of this week, if that doesn't work for you well sorry but that's all I can do and I don't want to spend more AI tokens on this (already spent too much).

You should really review the 3 working examples and compare your code with them, it does seem like you are have bubbling events from your child which are affecting the main grid (which is totally unrelated to the lib, you must fix that yourself and it was mentioned above) and I'm saying this because you are the only one with issues to have to click the icon twice to collapse (the demos don't have that problem, so it seems to be on your side only). If you can replicate the issue in any of the 3 examples then I can help, otherwise that is all I can do.

This is an Open Source project, if you find a problem, you can contribute a fix