Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Found an example for handling huge data with pagination here.
Are there any example of handling huge data with live scrolling?
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
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.
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();
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?
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).
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?
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.
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?
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.
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?
Asked: 2011-12-26 15:55:18 +0800
Seen: 568 times
Last updated: Jan 16 '12