# Grid load on demand when scrolling

1

Hi,

I'm developing a project in ZK and I'm facing very big performance issues with the grid component. A few details are included below: In one of my pages I have a grid of 350 rows and 25 columns. Each row has 3 event listeners and the grid also has a row of auxiliary headers with multi-select filters. When using paging (15 rows/page) the page takes approx. 4sec the first time it loads and then is much faster when navigating through the pages. Unfortunately, the use of paging is not an option and the whole dataset needs to be present in the page so the user is able to scroll up/down through the data. When I remove paging, the grid becomes unresponsive - presumably trying to render all 350 rows. If I interrupt loading, I observe that not all rows are rendered and not all event listeners registered.

In an attempt to see what slows down the page I removed all event listeners from the page and even removed the row of aux.headers but the grid was still very slow to render.

I also tried the ZK EE evaluation version but there seems to be no difference in behaviour. The model of the grid is backed by a ListModelList in a ViewModel. I made no changes to the .zul or ViewModel while trying the ZK EE evaluation component because the examples of grid and listbox load-on-demand show no difference in the ViewModel and Composer than what would be used in the CE version. So it seems that even with ZK EE the grid is loading all 350 records.

Is there something I should change in the ListModel or the grid to make it load-on-demand? As I wrote above, I switched to the EE modules for evaluation. Should I load the grid model from a Composer instead of a ViewModel to enable load-on-demand?

Any help is greatly appreciated!

Edit: Some additional info: I'm using a custom row renderer. I added a debug statement to see how long the row renderer takes to complete for all 350 rows and it takes approx 4sec. The page stays unresponsive for at least 3-4 mins, with ZK EE. So the data is sent to the client fast but then takes ages to process all the JS?

I think that if the grid becomes load-on-demand, all problems will be solved. I may be missing something trivial in achieving this, any thoughts? Any configuration I may have missed?

delete retag edit

Sort by » oldest newest most voted

1

It seems I was indeed missing important configuration. Load-on-demand is disabled by default in ZK - probably because it is a feature of EE. To enable it (for a grid) one has 2 options:

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


<custom-attributes org.zkoss.zul.grid.rod="true" org.zkoss.zul.grid.initrodsize="25"><custom-attributes/>

ALSO, as explained in ZK 6 Grid API documentation,

Note that ROD works only if the Grid is configured to has a limited "view port" height.

HTH

[hide preview]