Scroller toPosition/scrollToRow redraw problem...
Scroller toPosition/scrollToRow redraw problem...
joshstrike
Posts: 6Questions: 0Answers: 0
I'm trying to use scroller to restore the position of a table after a full clear().add().draw() cycle. I've found that if I do not use animation on scroller.toPosition(), the scrollbar will jump to the proper position but the table will appear empty. Any mouse interaction after that causes the table to render properly again. This is using client-side data.
For now, I'm using a workaround that jumps the position to a fraction off the row I'm aiming for, and then does the animation which prompts the render. Is there a way to trigger the render without animation or mouse events?
Here's what I'm doing right now:
//Note this.api is a reference to the DataTable()
let scrollRow:number = this.api.scroller().pixelsToRow(this.find('.dataTables_scrollBody').scrollTop());
this.api.clear().rows.add(this._dataSource).draw();
this.api.scroller.toPosition(scrollRow-.01, false); //This jumps the scrollbar, but fails to render the page, so we have to do a little animation after to prompt it.
this.api.scroller.toPosition(scrollRow, true);
This discussion has been closed.
Replies
Hi @joshstrike ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi @colin,
I've posted a test case here:
http://thestrikeagency.com/datatables-scroll-test.html
To reproduce, scroll somewhere down the list, click the reload button, and then click the reload button again.
I've narrowed it down. Scroller fails to to render only when you're jumping to the exact same position you were previously at prior to the draw() call. This surfaced for me because I'm using a custom search box that snaps your scroll position to a certain row without hiding the rest of the rows in the table. Since I was already at the exact row position, the draw/toPosition sequence was causing a rendering fail. Note that if you animate to the position, scroller will re-buffer it. Also, once you've clicked reload twice and the data has disappeared, scrolling manually will force it to re-render.
Thanks for the help!
Hi @joshstrike ,
Yep, that looks like a bug. I've raised it internally (DD-938 for my reference) and we'll report back here when there's an update.
A workaround that seems to work for me is to add an additional
draw()before the scroll - see example here. Could you try that please and see if it works for you.Cheers,
Colin
Hi @colin, thanks, that does appear to do the trick!
After more tinkering, I've discovered that instead of a second draw call, one can instead call table.scroller.measure() after the initial draw and prior to calling toPosition.