Scroll to top does not work

[ipassynk]

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

Current behavior Have a table with h and v scrolling. Scroll to the bottom, reload the rows and set offset to 0 to move the scroll position to the top. However, it does not affect the scroll position.

Expected behavior Move to the top when this.table.offset = 0

Reproduction of the problem https://plnkr.co/edit/iGyPA7TD46Y8BfSjVA7L

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.7.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[ipassynk]

I think I found a solution to scroll to top that works for us:

       setTimeout(() => {
         this.dataTable.offset = 0;
         this.dataTable.bodyComponent.updateOffsetY(0);
       });

[amcdnl]

Would exposing this.bodyComponent.updateOffsetY(this.offset); help you?

[bluecaret]

Was a solution ever found for this? I will need this feature if I'm to use this plugin. Thanks.

[szpetny]

@amcdnl For me this (this.bodyComponent.updateOffsetY(this.offset);) works only in chrome. For firefox it seems to cause a weird rows rendering issue - after reloading data, rows stay invisible until the table is scrolled manually. Probably because they are rendered too low (not sure)? Anyways I saw a ticket with a similar issue: https://github.com/swimlane/ngx-datatable/issues/985 I use [scrollbarV]="true", no paging. version 10.4.0 (didn't test it with v.11) Not sure if anyone else still has this problem?

[LukeT]

Also running into this, as a work around you can call this.table.element.getElementsByTagName('datatable-body')[0].scrollTop = 1; once you've updated the rows which causes the hidden rows to be displayed

[szpetny]

yea it works like that, thx

[markanthonyg]

$('datatable-body').scrollTop(0);

[faridhajnal]

I tried the updateOffsetY approach but did not work for me ... However LukeT's approach worked properly; thank you veyr much!

[Balagii]

Setting scrollTop workaround did not seem to work. When it's time to reload new data, new rows and scroll to the top, the table will report scrollTop of 0, but the rows don't render any text so you see a blank table with a scrollbar (falsely) suggesting a ton of content. Then if i move the mouse wheel or otherwise trigger a scroll event the table content actually renders, my rows, like magic, become visible. The real problem is that when the newly loaded row-set has only 1 row (or less than 1 page's worth in any case) and you can't trigger a scroll event at all - then the data never actually shows up. (tested in Chrome and FireFox)

thanks @szpetny for suggesting #985 - updateOffsetY did the trick

[platon-rov]

Also running into this, as a work around you can call this.table.element.getElementsByTagName('datatable-body')[0].scrollTop = 1; once you've updated the rows which causes the hidden rows to be displayed

Also worked for me to scroll to certain row but it's needed to use it that way ...scrollTop = rowHeight * neededRowIndex

[one-click-varshil-doshi]

@LukeT my scenario is like this, When i click on pagination in ngx-datatable, i have loading new data as externalPaging = true, after this i just want to scroll to top of the page, but not working, i have applying "this.gridDatatable.bodyComponent.updateOffsetY(0);" and also used perfect-scrollbar in angular Thanks in advance.

[sayedsadat344]

I think I found a solution to scroll to top that works for us:

       setTimeout(() => {
         this.dataTable.offset = 0;
         this.dataTable.bodyComponent.updateOffsetY(0);
       });

this solution is working, tested in chrome.