0

Handling huge data with live data scrolling

asked 2011-12-26 15:55:18 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

Found an example for handling huge data with pagination here.

Are there any example of handling huge data with live scrolling?

delete flag offensive retag edit

13 Replies

Sort by ยป oldest newest

answered 2011-12-28 01:14:50 +0800

jeanher gravatar image jeanher
1719 1 6
ZK Team

Have you checked out these demos:

Listbox with 250,000 items:
http://www.zkoss.org/zkdemo/listbox/load_on_demand

Grid with live grouping:
http://www.zkoss.org/zkdemo/grid/load_on_demand


You might also be interested in this performance tips: Listbox, Grid and Tree for Huge Data

link publish delete flag offensive edit

answered 2011-12-28 06:35:34 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

Thanks. I got it working still facing couple of issues.

1) Added below properties into zk.xml

<library-property>
	<name>org.zkoss.zul.grid.rod</name>
	<value>true</value>
</library-property>
<library-property>
	<name>org.zkoss.zul.grid.initRodSize</name>
	<value>25</value>
</library-property>

2) Defined a grid as follows

<grid id="taskList" vflex="1" hflex="1">

Facing the below issues
a) When the grid loads first time the method getElementAt(index:int) method is invoked 25 times starting 0 and 24. When I scroll down the grid, I was expecting the getElementAt(index:int) method will invoke for index between 25 and 49 but it invoked 0 and 49 i.e. 50 times. How do I make the rendered row cached at client side so that it doesn't invoke getElementAt() method again and again.

b) I can cache the data in ListModel object but when to clear the cached data? Ideally it would be nice if zk framework invokes another method to allow custom ListModel to clear cached data.

link publish delete flag offensive edit

answered 2011-12-28 08:39:59 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

updated 2011-12-28 08:40:23 +0800

Hi venkatsalem,


When you scroll the grid into another viewport, the grid will request amount of data from the model in server, so it will fetch the object in model when you reach another viewport, you can listen onDataLoading event to the grid, and you can retrieve the offset info from event:

int offset = evt.getOffset();
int limit = evt.getLimit();

link publish delete flag offensive edit

answered 2011-12-28 08:53:53 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

I added onDataLoading event and got below data when scrolling to down to next viewport, I was expecting offset: 25 and limit: 25.
offset: 0 and limit: 68

Another test case I tried is when I click end key on the keyboard to move to bottom of the grid got below data.
offset: 23 and limit: 68

Am I missing some settings?

link publish delete flag offensive edit

answered 2011-12-29 10:45:36 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

updated 2011-12-29 10:45:48 +0800

Hi venkatsalem,

I have created a sample

<zk>
	<zscript><![CDATA[
		List list = new ArrayList();
		
		for (int i = 0; i < 500; i++)
			list.add("item " + i);
		
		ListModel model = new ListModelList(list);
		
	]]></zscript>
	
	<grid id="grid" width="150px" height="300px" model="${model}"></grid>
	
	<zscript><![CDATA[
		grid.addEventListener("onDataLoading", new EventListener() {					
			public void onEvent(Event event) throws Exception {
				int offset = event.getOffset();
				int limit = event.getLimit();
				
				System.out.println(offset+", "+limit);
			}
		});
	]]></zscript>
</zk>

You can see the limit is fixed, when you scroll down to the end, the offset is 450, but the latest item is "499", it mean it will render item 450- 499,

in the other case, offset: 143, it will render item 143-239 (97 items).

link publish delete flag offensive edit

answered 2011-12-29 13:04:51 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

updated 2011-12-29 13:39:14 +0800

Hi Jimmy - Yes, you are right. I could see the same result.

I have set initRodSize = 25 in zk.xml, how does it determine 97 as limit? How do I customize that?

Also when I scroll down it is requesting 54, 97. Since grid got item from 0 to 97 on first load, shouldn't it request data starting 97 and above?

link publish delete flag offensive edit

answered 2011-12-30 03:16:42 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

1st ROD load: By default ROD size is 100 and it will load 100 items. If you set initRodSize=25, it will load 25 items. However if your grid is bigger than 25 rows, we cannot just load 25 items and leave the bottom of the grid empty. In this case we will load "the number of grid rows + 25".

scrolling: the concept is to load "the number of grid rows + initRodSize". For example, if the number of grid rows is 35, and initRodSize is 25, then 35 + 25 = 60. We will distribute this 60 evenly (30 each) before and after the visible grid, to ensure that end users can scroll up and down smoothly.

Depending on the theme applied (which affects the row height), there might be some slightly differences in the numbers. It may not exactly be "25" or "60" depending on the calcualtion. However the concept applies to all.

link publish delete flag offensive edit

answered 2012-01-01 18:56:42 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

Sounds good. I think I got it.

2 more questions

a) Are there any events to notify once the data loading completed on the ListModel? this event will help to clean the cached data. [For example wicket provide detach() method in their model which allow developer to clean the data once the page is rendered]
b) Say for example I want to render 1000 rows in grid. If I move to bottom of the grid i.e. last page data gets load from server, now if I come back to first page in the grid browser makes new request to server to fetch the data again. Is there any settings which I can use to retain the visited page grid data in the browser?

link publish delete flag offensive edit

answered 2012-01-02 01:39:37 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

a. Yes, you can listen onAfterRender event, please refer to http://books.zkoss.org/wiki/ZK_Component_Reference/Data/Grid#Supported_Events

b. Caching data at the client will consume browser memory so it is not recommended. However it is doable with custom javascript.

link publish delete flag offensive edit

answered 2012-01-02 05:25:24 +0800

venkatsalem gravatar image venkatsalem
87
http://webmoli.com

Thanks, Jimmy.

a) For on-demand grid, onAfterRender event occurs once i.e. while loading the grid on first time. While lazy loading data during scrolling, it does not fire onAfterRender event.

b) Yes, it will consume memory, in our case we need this to reduce server round-trip. Can you share some code or tips to cache at browser side?

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-12-26 15:55:18 +0800

Seen: 561 times

Last updated: Jan 16 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More