Expanding multiple rows cleans the row expand view of the earlier expanded rows

[rajenme]

I'm submitting a Bug report

Your Environment

Software	Version(s)
Angular	9.x
Angular-Slickgrid	2.4.24
TypeScript	3.x

Describe the Bug

I'm facing a issue with the row detail feature, when I expand multiple rows and then come back to the earlier ones, they become blank.

I checked on the official demo page here and the issue persist there too.

Steps to Reproduce

1. Go to example demo page here
2. Go to the table at bottom and first expand a row. Expanding row 6 here.

3. Expand another row. Sometimes opening another row cleans the view of earlier row expand view.
   Before expanding another row:

After expanding another row:

4. Otherwise, scroll a bit down, expand another row, scroll down more, expand another and then scroll up to check earlier expanded rows, it turns out the earlier ones becomes blank.

Expected Behavior

All the expanded rows should keep their view data and should not go blank.

Current Behavior

Currently earlier rows go blank after opening multiple rows and coming back to earlier ones.

Possible Solution

It seems the library is caching the view or is not always able to maintain multiple view component. Although, I'm not sure. I have tried to toggle these fields and used multiple combinations of these in row detail view object,
rowDetailView: {
...
loadOnce: true,
saveDetailViewOnScroll: false,
useSimpleViewportCalc: true,
singleRowExpand: false,
...
}

Code Sample

https://ghiscoding.github.io/Angular-Slickgrid/#/rowdetail

[ghiscoding]

Sorry but there's nothing I can do for that, I already spent too much time on this. If you scroll a bit further and come back it will probably re-render. Internally there's a function that tries to detect if you are further away from what the user sees on the screen, and when it detects that the given row detail(s) comes back in the view then it tries to re-render them.

You can perhaps try to call redrawAllViewComponents() method, from the extension, after scrolling, it might be less efficient but might help. Or switch to 1 open row detail, I think there's less problem with only 1 opened row.

The calculation happens by the onRowBackToViewportRange event and method here, this is supposed to detect which row details are in the viewport and re-render (redraw) them, SlickGrid requires a re-render anytime a row gets out of the viewport and later comes back in the viewport. With that in mind, you could try to register to this event from the grid option rowDetail: { onRowBackToViewportRange: (e, args) => console.log(args) }

I'll say it again, I won't spend more time on this but if you find a fix then I'll be happy to receive a PR

[ghiscoding]

If you want to troubleshoot the lib, it mostly happen in this method calculateOutOfRangeViewsSimplerVersion and checkIsRowOutOfViewportRange.

If you find a solution, that would be great, most probably in the core lib SlickGrid, probably no changes to do in Angular-Slickgrid.

[rajenme]

Hi, I tried the things you mentioned but couldn't get it to work. I'll keep trying and searching and will create a PR if I'm able to fix it.

[ghiscoding]

If you could use only a single row to be opened, I believe there's no issue with that one and it's only an issue when you use multiple, so if you could do that then go with singleRowExpand: true

Sorry I couldn't help with this, I just don't have time to invest in this at that point

[ghiscoding]

@rajenme
I took a quick look at the Row Detail extension I created to handle this plugin with Angular and I found out that I made a mistake when adding the datasetIdPropName, I keep the View with an id not with the dynamic datasetIdPropName and so I was keeping all the Views with undefined instead of their correct associated id (or custom id)... long story short, the refresh of each Row Detail wasn't working correctly with using a custom Id with datasetIdPropName

The new PR helps quite a bit, but I still see some of the rows not refreshing at some occasion but a lot less than now.

So my question is, did you use datasetIdPropName in your grid?
If so then the new PR will certainly help

[ghiscoding]

I actually found the issue, and the last fix in PR #552 seems to finally make the Row Detail work in every use cases.

[ghiscoding]

@rajenme
The fix is now available in latest version 2.20.2, the Row Detail Example is now also working as expected, it no longer blanks at any point in time and you can use multiple Row Details as well, it's finally fixed 😅

Please upvote ⭐ if you haven't already.
Cheers