clr-dg-detail not working with server-driven data grid

[ig-semenov]

The clr-dg-detail component does not function as expected when used with a server-driven data grid. When attempting to display detail rows, the component fails to load or display the additional data properly, causing an inconsistent or broken UI behavior.

How to reproduce
Add clr-dg-detail to the grid in the provided StackBlitz example: StackBlitz Reproduction Link.
Attempt to expand a detail row in the data grid.
Observe that the detailed information does not expended.

Expected behavior
The clr-dg-detail component should expand a row, regardless of whether the data is server-driven or client-side.

Versions
Clarity version: v17.x
Framework version: Angular 18
Device:

Type: MacBook Pro
OS: macOS 13.2
Browser: Chrome
Version: 109
Additional notes
This issue only occurs when the data grid is connected to a server-driven data source. It functions as expected when using a static data set. This may be related to how the data is fetched or rendered in the detail row.

[dtsanevmw]

Hello,

Looks like the link for reproduction that you left is not pointing to the right place. Could you check it out and give proper reproduction link?

[ig-semenov]

I used a link from the clarity documentation about the server-driven data grid. and added this code also from the documentation:

<clr-dg-detail *clrIfDetail="let detail">
  <clr-dg-detail-header>{{ detail.name }}</clr-dg-detail-header>
  <clr-dg-detail-body>
    <!-- ... -->
  </clr-dg-detail-body>
</clr-dg-detail>

changing
<!-- ... --> to <span>Test</span>

Shortly: i can see '>>' but nothing happens when i click on it.

[kevinbuhmann]

Please share link to the StackBlitz you created.

[ig-semenov]

https://stackblitz.com/edit/6n5sjy9t?file=src%2Fapp%2Fexample.component.html

[dtsanevmw]

Detail pane requires 'clrDgItem' to be used on the rows as that is the context used for it. Please check the examples on the page