SlickGrid
SlickGrid copied to clipboard
6pac
Grid goes blank in chrome and mac
The grid fails to render when we do some expand collapse. It happens only in chrome browser on mac machine. It does not happen in any other combinations. Have attached the video of the behavior at this google drive link.
https://drive.google.com/file/d/1sP0JfrOtiPtRUBu3Q55CQuWxSmfbI1KZ/view?usp=sharing
Sorry but I never use Mac on my side, so I can't help. It's also a little hard to help if you're not providing any of the code that you use. @SatanEnglish, have you ever encountered such thing with Row Detail?
I am on MacOS, but as @ghiscoding says, it will be hard to diagnose without code. I notice that I do have access to the URL in the video (though it's username/password protected).
Here are some observations:
- you appear to be using the detailsview plugin, this is only new and has had a lot of patching done lately, are you sure you're up to date? I would strongly suspect this is where the problem lies.
- that plugin is also a bit experimental (@ghiscoding and @satanenglish may differ in opinion on that, but personally I think it may open up a can of worms, I would tread carefully and test thoroughly)
- presumably you are using this (6pac) repo with an up to date copy
@ghiscoding Nope not encountered this myself. However I do have a mac at work so I'll have a look in the next couple of days and see if i'm having the same issue on a working project.
@okruti-rgupta Worth noting looking at your video a fix you could put in for now would be to find the event that fires after toggle and put a grid.invalidate() think this should fix it in the mean time.
@6pac @ghiscoding @okruti-rgupta I've check this for my project and there are no issues on mac chrome.
@6pac If you could do some checks on a mac around the examples for detail rows just to be safe that would be appreciated.
@okruti-rgupta also forgot to add point earlier: have you opened up the console and checked to see if an exception is being raised?
Also, just checked the example on Mac Safari and Chrome, no issue I can see.
I am sorry to post this so late. It took me time to arrange mac machine to test the application. I did not see any errors in console logs. Attaching screens for reference.
@okruti-rgupta Unfortunately since none of us have this kind of problems and you didn't provide any code sample. There isn't much we can do to help you without any code to troubleshoot.
I have also encounterd thi problem on mac. But i don't have any error nor exception in console. When i scroll row the grid disappears or if i edit the value with any built-in editor and press enter to commit the value, the whole row disappear.
I use the latest version of chrome 73.0.3683.86 (Ufficial build) (64 bit)
To solve this, we need to be able to reproduce it. Can it be reproduced on one of the standard examples? If not, then with a standard example with some modifications? PasteBin is ideal for submitting a page that will run if placed in the 'examples' folder of a local copy of the repo.
I would say it's probably a CSS styling issue or a DOM element that is hiding the full content. I think SlickGrid re-renders at some point and if it does, it might have z-index bigger than the actual row detail content.
@ghiscoding poyel has said about when editing with built in editors. Have we even tested with editors active?
My cases the grid is all read only when using the detail view.
Anyway till we get something that reproduces the issue not sure how we can fix it.
Just weighing in that I've run across this as well. I'll work on trying to get some code and a reproducible use case but I was able to confirm from my testing that this was not happening in v2.4.3 and was first introduced in v2.4.4 in case that is helpful.
Here's where I've run across it (again, apologies to not yet have a CodePen to share)
- Collapse all grouped rows
- Re-expand all grouped rows
- Scroll down a bit vertically
- Scroll horizontally
- Scroll back up a bit vertically -- missing rows.
Doing a horizontal scroll then makes the missing rows reappear, I assume that action must invalidate the rows causing a rerender.
(presume that last line should be 'vertical scroll then makes ...') -- oh, perhaps not!
Not a bad assumption, but actually that wasn't a typo - the horizontal scroll while staring at a mostly blank grid brings the rows back. I'm thinking the horizontal scroll fires some rerender so that's why it is the initial cause for the rows off-screen to be removed and why it is also the solution to bring them back later.
Obviously I need to resolve this for my own project so I'll work on flushing this out in one of the examples in a CodePen and then hopefully submit a PR soon 👍
Thanks for taking ownership over this repository by the way, it has really been a great help to our team!
SlickGrid uses buffer (top/bottom) to avoid rendering thousands of rows for performance reasons, and that buffer is also used in the Row Detail plugin on this line. This buffer size was also added as a grid option so that it could be available in the plugin. So perhaps you can try to play with that option minRowBuffer, try increasing or decreasing, the default in SlickGrid is 3. I'm not sure that's the problem but you might want to give it a shot.
On the other end, there is no re-render with scroll, I think that would be really bad on performance to do that.
Just wanted to circle back on this and mention that @ghiscoding was spot on in his initial assumption that ultimately (for me) this was related to some CSS styling overrides I was applying to SlickGrid. 🙏
Long story short, I had autoHeight set to true and was also manually updating the height of an iFrame containing SlickGrid. I resolved the issue by setting autoHeight to false and calling grid.resizeCanvas() after my iFrame had been resized.
closing since this issue is old and a lot has changed since then we removed jQueryUI in v3.0 and we also removed jQuery in v4.0 which we just released (see v4.0.0 release)). Feel free to reopen by providing more details if it's still an issue