| TablePage - Load more Data on Scrolling [message #1763555] |
Wed, 17 May 2017 11:49  |
|
Hi there,
I'm just wondering if it's somehow possible to implement a dynamic data reloading in a table page, when the user scrolled to the bottom of the table and there are more records to show in the database.
I'd need such feature because the users are currently used to scroll through the tables and look for an entry they need and then open it for further editing.
They are not used to "search first for what you need" to narrow down the amount of records.
Is there a possibility to implement something like this in Scout?
Thx,
Peter
|
|
|
| Re: TablePage - Load more Data on Scrolling [message #1763690 is a reply to message #1763555] |
Thu, 18 May 2017 15:20  |
|
Hi Peter,
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.
But you seem to look for something called infinite scrolling. This is not supported by default, but you should be able to implement it. You would need to write some JavaScript, though.
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.04025 seconds
] 
Search
Help
Register
Login
Home
