Ngx-datatable: Data disappears when virtual scrolling is used

[andrii-oleksyshyn]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
When I use pagination on table with virtual scrolling ([scrollbarV]="true", fixed height of datatable-body) or just scroll, then load empty array and switch back to array with data, table looks empty, but when I scroll data starts to render normally.

Expected behavior
I load some data into table, use pagination or scroll, then load empty array, then load data and it appears normally.

Reproduction of the problem
I used your plunker template to reproduce this issue: http://plnkr.co/edit/Aqk78IrHxywjkre11BZH?p=preview

I added [scrollbarV]="true" to the table, height: 500px for .datatable-body in style.css and 2 functions: one for loading data from server and another for loading empty array.

Reproduction steps:

1. Open http://plnkr.co/edit/Aqk78IrHxywjkre11BZH?p=preview and see empty table.
2. Click "Table with data" button and see rendered data in the table and pagination below.
3. Click pagination button (e.g. "3"), see data successfully scrolled to selected page in the table.
4. Click "Empty Table", see that table doesn't contain any data.
5. Click "Table with data" button again and see that the table is still empty, but item number (100 total), pagination and scroll bar are in place.
6. Scroll the table and see that data renders.

What is the motivation / use case for changing the behavior?
This issue causes serious impact on using virtual scrolling.

Please tell us about your environment:

Windows 10, Chrome 58/Firefox 54
MacOS, Safari 10.1

• Table version: 9.3.0
  

• Angular version: 4.2.2
  

• Browser: Chrome 58, Firefox 54, Safari 10.1
  

[adammedford]

Your use case isn't very practical so I'm going to attempt to elaborate.

1. You have a table populated by data returned when the value of a textbox changes
2. This table is paginated client side, rendered virtually
3. User goes to the 4th page and still hasn't found what they are looking for
4. User makes their search criteria more specific to narrow it down.
5. Shit no results. Back to what we had before.
6. Nothing here because the scroller is wrong.

Even if the user's second search gets results it will still be wrong because it will place that user on the 4th page of a new data set.

This is happening because the offset on the scroller isn't reset when rows change but the height is reset. The rows render correctly but ~800px lower in their previously scrolled position. If externalPaging isn't used then this probably needs to be reset on every data change.

[adrm]

I'm hitting this same bug but also when the user scrolls the content and new rows come from server to feed the virtual scroll. Is there any workaround? Thanks.

[markanthonyg]

Finally found a hack for this:

http.get(...).subscribe(res => {
     /// set rows
     setTimeout(function() { $('datatable-body').scrollTop(1); }, 1);
     setTimeout(function() { $('datatable-body').scrollTop(0); }, 1);
}

Works in chrome + ie.
Using angular 5.0

[kassomeone]

Best Solution I found is

setTimeout(function () { document.getElementsByTagName('datatable-body')[0].scrollTop = 1; }, 1); setTimeout(function () { document.getElementsByTagName('datatable-body')[0].scrollTop = offsetY; }, 1);

the problem is when the rows are updated scroll must be moved to render the new rows hence the work around was to take scroll to 1 and reset to actual position.

[silkyfray]

The above solution by @kassomeone fixes a similar problem I have. The page loading stops after a few virtual page loads and I have to scroll a tiny bit up in order to force the next render of the datatable component.

[ghost]

The solution by @kassomeone works for me too. Thanks! In my case I wanted to simply keep the vertical scroll position (but still get the redraw), and using only one timeout callback seems to do the trick:

setTimeout(() => { document.getElementsByTagName('datatable-body')[0].scrollTop++; document.getElementsByTagName('datatable-body')[0].scrollTop--; }, 1);

[asachan2707]

@kassomeone, Your solution works for me but only in case of more results when v-scroll is available not for less results. Have you any solution for this one.
FYR

[clabnet]

@torbjornvik Thank's, it work. Very good job.

[HackPoint]

@torbjornvik why does it not working for me in IE from code? But when I'm using it from IE11 console it does show the data after it disappears.

Could you help please?

[LeonardoWiest]

647