Only able to see first cluster (Node.js)
opened this issue · comments
Hi,
I hope someone will be able to shed some light upon my issue. I've seen countless times the other closed issues of Clusterize.js where people have had the same problem. I've cross-referenced my application and haven't had any success in finding out where my issue lies.
Here's the issue I'm having
As you can see, I'm having issues with the rest of the list being blank, even though there is data left.
I've checked my styles, they're loading correctly.
I included a screenshot of what the data being passed consists of, and I also tried showing the source with styles correctly loading.
I'm using Node.js v8.10.0, Electron (for UI), and Clusterize.js v0.18.1 from npm.
Hello
Could you provide demo on codepen?
I can try to mock something up. I'll also post a link to the repo I have it in
Hi all. I'm having the same issue. I made a codepen here: https://codepen.io/markwissler/pen/byLXeY
I may be missing something, but my general html structure is reflected here. Thanks in advance.
Thanks for your codepen. I've been a little busy with other work to come up with something similar, but I see that yours has the same issue going on.
Here's my specific case of the HTML that's causing me issues. https://github.com/ioncloud64/freemegb/blob/master/main.html
@ioncloud64 my instance was fixed by checking out the .scrollTop of the element I was scrolling. In my codepen, if you just set the CSS class selector from contentArea to scrollArea (such that clusterize is reading the scrolling properly: from scrollArea, not contentArea) then it works. That may or may not be the same issue you're seeing, but it's worth a shot. To debug that this was the cause, I put in a setTimeout(function () { console.log(clusterize.getScrollProgress()); }, 3000) and scrolled as far down as I could, and still saw 0 as the scroll progress.
@MarkWissler interesting. I forked your codepen and made the changes you suggested. It worked. So then, I changed both of the scrollId and contentId to contentArea and that worked. So what I'm thinking is, scrollId/contentId have to be the same in order for it to work. I'll test performance out in a few minutes.
I did the same thing in my real application, which seemed to work. I started to run into stuttering, which I'm unsure how to resolve since in my case, the div I need to scroll is nested inside another scrollable div, so scrapping the effort for now.
I tried to apply the fix in my Node.js application and it did not work. It appears that when setting scrollArea to both, it breaks the code. When applying contentArea, it only loads one full cluster. With my data, I have probably 30 clusters that need to be shown.
Same for mine. I have ~12 clusters of 30-1100 items each. What happened when you set the content area and scroll area to be the same?
It only loaded 1 cluster. It turned blank way earlier than the previous version. I highly doubt it's an issue with memory. I'm running it on 32GB of RAM. If you want I can post a file with the table in question
I believe I may have found an issue with my application. I believe it's because of the event listener I'm using. I'll try to make Clusterize local to the page, then add it via event listener.
Tried to make it page-local, same results still.
Any update @NeXTs ? @MarkWissler
None from me, I gave up on it. The jittery scrolling was too much.
@MarkWissler got an alternative? I have so much data I can't possible load it all natively w/ HTML.
@MarkWissler I found an alternative. It's called slickgrid. You can install it via npm but you'll need to link to the javascript and jquery libraries individually. I'll post a link with my updated source code and comments of changes.
https://www.npmjs.com/package/slickgrid
axioncloud/freemegb@66e47a1
For guidance as to how I set it up for node.js