What is SlickGrid doing differently to make its virtual scrolling so smooth?

jcready

Check out their demo for displaying 500,000 rows: http://mleibman.github.com/SlickGrid/examples/example-optimizing-dataview.html

I'm using the Scroller plugin with client-side data and unlike SlickGrid, which appears to debounce the rendering of a new "page" of rows until the user has stopped scrolling, Scroller seems to generate and insert the rows the instant you reach the redraw boundary. The result of Scroller doing this is it basically freezes the browser for a split second while doing all that work. Is there anyway to get the debounced functionality of SlickGrid into DataTable's Scroller plugin (specifically with client-side data)? I believe Scroller already does this for server-side data so I'm hoping there is some simple way to enable it for any data source.

https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L1616

allan

> Scroller [...] appears to debounce the rendering of a new "page" of rows until the user has stopped scrolling

Are you using server-side processing with DataTables? If so, Scroller which exhibit the behaviour you describe to try and stop scrolling from DDoSing your own server with tons of Ajax requests! This is the bit of code that does that: https://github.com/DataTables/Scroller/blob/master/media/js/dataTables.scroller.js#L503 . If you remove that block, DataTables will refresh while the scrolling is happening, which might be more what you are looking for. With client-side processing, DataTables will redraw during a scroll (with the exception of iOS which does not fire a 'scroll' event until the scrolling ends).

One thing to remember is that the way SlickGrid and DataTables works are very very different - SlickGrid uses DIVs while DataTables uses a TABLE element. As such, DataTables is somewhat limited when it comes to virtual scrolling to moving that element around, while SlickGrid and draw rows "ahead of time" which is does very effectively. SlickGrid is an absolutely superb piece of work (Michael is nothing short of brilliant), but it is looking to solve a different set of problems (although obviously related) to DataTables.

Allan

jcready

[quote]If you remove that block, DataTables will refresh while the scrolling is happening, which might be more what you are looking for.[/quote]

I'm actually looking for the opposite of that, as in, I *want* DataTables to defer doing any calculations or rendering until the scroll has stopped. So if the user drags the scrollbar handle quickly (up and down inside the scrollbar track), Scroller will sit idle (simply showing empty space in place of the table rows).

I'd prefer to have fluid/snappy/responsive scrolling/controls rather than the guarantee that row data is always visible. This is for 20,000 rows of client-side data loaded through the mDataProp function. When I try to scroll rapidly up and down through the table, it hangs the browser so much when changing "pages" that the scrollbar handle cannot keep up with my cursor.

The scrollbar handle in the server-side processing example (with processing indicator) http://datatables.net/release-datatables/extras/Scroller/server-side_processing.html is correctly staying in sync with my cursor on every repaint by the browser. Even as I quickly drag it from the top to the bottom of the scrollbar track and back again.

When I do the same thing to the scrollbar on the 50,000 rows client-side example: http://datatables.net/release-datatables/extras/Scroller/large_js_source.html the browser ends up repainting the scrollbar handle in a different position than where my cursor currently exists (and seems to have a smaller frame rate) because Scroller is trying to update the DOM while the browser is still scrolling.

allan

Ah I see - In that case, just comment out the if condition and have Scroll always wait until Scrolling ends :-).

So I'm a bit confused - Scroller should already do that with server-side processing. Are you using server-side processing? Can you give me a link to your page so I can see what is going on?

Allan