Table not fully rendered

Tags: #<Tag:0x00007efc72f83930>
#1

Hi,

when filters plugin is used ngHot is behaving strangely. Ajax request is used to fetch data from the server, but after data is fetched, only part of the table is populated (first 6 rows). If min-spare-rows is used, that rows are then after those first 6 rows.

Here comes interesting part - when I scroll (or change window size, click anywhere on the table…) rest of rows become visible, but after the spare rows!

If I disable filters plugin 5 empty rows are visible while data is being loaded, but when whole data set is loaded all rows are visible + spare rows are at the end of the table.

Since this is fairly complex app I am not able to put it on jsfiddle or some similar service. Please take look at the follofwing gif (too big to be attached here): http://im2.ezgif.com/tmp/ezgif-855749166.gif

Here are my settings:

Pasted image726×703 37.8 KB

I tried to “mask” this thing by using startRows property to show first 50 rows, and then when user clicks/scrolls rest are populated below, but this solution is not feasible enough because of the spare rows which I also need.

So, short description - when filters plugin is used table is not fully rendered until some action with the browser (click, scroll), spare rows are added at the wrong time to the wrong place.

ps. Could it be related to: Table not showing until change

#2

Hi @danijel.dukaric

The second image shows the 404: http://im2.ezgif.com/tmp/ezgif-855749166.gif

There is no change to isolate the issue to replicate it in the Fiddle? Usually you do not need a full application to replicate the issue.

What came to my mind is that maybe you could add this option https://docs.handsontable.com/pro/1.5.0/Options.html#viewportRowRenderingOffset to render all needed rows.

#3

Here is new link, seems like first one was deleted to fast
As you can see in my config, I am already using viewportRowRenderingOffset, but it does not have any effect on this situation.

#4

Ohh sorry, you’re right the viewportRowRenderingOffset is already there.
I guess that without a demo it would be really hard to say anything more. I see that you have renderAllRows as well.

#5

Any idea where should I look furthermore? Does any of the devs have some idea maybe?

I tried looking through the source, but it is hard to find anything among ~35k lines of code :\

#6

Did you tried to get rid off styling?

#7

I got another idea/workaround which seems to work.

I added something like this:

`


<hot-table …
`

This (ng-if) will enforce handsontable to initialize only after dataset is completely fetched from the server. With additional “Please wait” dialog it works like a charm now.

#8

Oh I see… thanks for sharing your investigation results @danijel.dukaric

#9