0

I'm facing a issue with the Angular SlickGrid 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. enter image description here

  3. Expand another row. Sometimes opening another row cleans the view of earlier row expand view. Before expanding another row: enter image description here After expanding another row: enter image description here

  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. enter image description here

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 object,

rowDetailView: {
...
loadOnce: true,
saveDetailViewOnScroll: false,
useSimpleViewportCalc: true,
singleRowExpand: false,
...
}

Thanks in advance.

Rathore
  • 256
  • 4
  • 9
  • I'm the owner of the 6pac repo, which is the current official base repo. The expanding rows option is one I didn't write and don't officially support. I suspect there are quite a few gremlins lurking in there. @ghiscoding, the owner of the Angular repo might have more insight. – Ben McIntyre Jul 30 '20 at 03:43
  • and I'm the owner of Angular-Slickgrid and I already replied to this on the same issue that you opened in Angular-Slickgrid [issue #546](https://github.com/ghiscoding/Angular-Slickgrid/issues/546#issuecomment-665629635). – ghiscoding Jul 30 '20 at 13:13
  • I just added the question to make sure someone hasn't already found a solution. Plus, GIT also suggest to find questions on StackOverFlow before creating a bug/issue. Anyways I'll keep investigating the issues and will revert here if I'm able to solve it. – Rathore Jul 30 '20 at 13:56
  • You're right, I'm pushing for any questions be asked on Stack Overflow instead of opening Github issues when it's not bug related. – ghiscoding Jul 30 '20 at 23:11

1 Answers1

0

After spending couple of hours on this, I found the following 2 issues:

  1. when passing a custom Id with datasetIdPropName, the Row Details were not refreshed at all
  2. in some occasions opening a new Row Detail was blanking previous Row Detail

Both of these issues were found and fixed in separate PRs (#550 and #552)

The latest version 2.20.2 now includes these fixes and the Row Detail - Example is now working as expected as well.

... so the Answer to your question is to just Update to latest version of Angular-Slickgrid

ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • Hi! I tested this and found that the rows still appears blank once they reappear after scroll, but once we stop scrolling and start again to scroll, they reappear, so I think there is just some delay or the re-rendering is not done when they get in viewport. So I think this points me in the right direction. Thanks for the help. I'll try to make it full proof and will get back to you. – Rathore Aug 05 '20 at 09:34
  • 1
    The way SlickGrid is built is to create/remove DOM elements for each row on the fly, there's also a buffer of 3 rows on top/bottom, SlickGrid only renders what is visible to the UI for performance reason. e.g. if the user can see 10 rows on the screen then SlickGrid renders 16 rows (10 + 3 + 3) and every time your scroll it removes hidden elements and creates new ones for the next visible rows... So anytime you scroll, the Row Detail needs to be re-rendered and that is what makes everything challenging, you can maybe try to increase the `minRowBuffer` grid option (default is `panelRows + 3`) – ghiscoding Aug 05 '20 at 12:57