|Re: TablePage - Load more Data on Scrolling [message #1763690 is a reply to message #1763555]
||Thu, 18 May 2017 15:20
|| Claudio Guglielmo
Registered: March 2010
the Scout table supports virtual scrolling, this means you may load a lot of rows and add them to the table. The rows will be held in memory, but only the rows visible in the viewport are rendered. So let's say you load 10'000 rows, only around 30-40 rows are rendered, depending on your table height. For the other rows no HTML elements will be created which is crucial for the performance, especially with Internet Explorer.
I have never tried it, but I think the following steps are required:
- Extend the Table.js by using scout.inherits and scout.objectFactories
- Override the function _onDataScroll and trigger a 'loadmore' event (choose a name you like) similar to the 'reload' event, if the scroll position is at the end (checkout scrollTop, scrollHeight).
- Extend JsonTable by using the JsonObjectFactory and handle your new event.
- Delegate the event to your table in the model and load the rows.
- When the rows are loaded, call addRows of your table which sends them back to the UI.
You probably also want to show a loading indicator while the rows are being loaded. And you should think about what happens to the old rows. To you want to keep them forever or discard them after a while?
Happy coding :-)
Powered by FUDForum
. Page generated in 0.03254 seconds