Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » TablePage - Load more Data on Scrolling
TablePage - Load more Data on Scrolling [message #1763555] Wed, 17 May 2017 11:49 Go to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 193
Registered: November 2014
Senior Member

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 Go to previous message
Claudio Guglielmo is currently offline Claudio GuglielmoFriend
Messages: 161
Registered: March 2010
Senior Member
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:


  1. Extend the Table.js by using scout.inherits and scout.objectFactories
  2. 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).
  3. Extend JsonTable by using the JsonObjectFactory and handle your new event.
  4. Delegate the event to your table in the model and load the rows.
  5. 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 :-)
Previous Topic:[neon] ProcessButton positioning
Next Topic:[neon] F1 Keystroke
Goto Forum:
  


Current Time: Wed Nov 22 21:45:57 GMT 2017

Powered by FUDForum. Page generated in 0.01656 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software