how to fix ListGroupModel performance issue

asked 2017-11-01 17:24:26 +0800

mangaldaslima gravatar image mangaldaslima
11 2

updated 2017-11-02 09:40:44 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

Thanks MDuchemin for your suggestions.

Here in below i am posting my requirements and approach what i have tried. Please provide, how can i solve these issues.

Requirements: I want to create a group model list which will able to render quickly at least 500 rows without pagination and fixed height. i have following 4 functionality with this group model:

  1. Add: i can add one or many items to the list by a global level button
  2. Delete: i can delete a particular item from the list by row level button
  3. Edit: i can edit the whole list by a single global level button
  4. Expand/Collapse: Able to expand/collapse the whole list group with a global level button

Approach: As browser is getting hanged while rendering 500 rows, so i decided the following approach: - If i have more than 100 rows to render in the list group, i will collapse all groups with defering the children. When i expand a particular group, then it's children will render.

Here is the listbox with grouping example, i also try the same with grid. i tried with the group model with AbstractGroupsModel, GroupsModelArray, SimpleGroupsModel implementations. Actually i need an auto-notifiable GroupModel like ListModelList(In case of simple listbox) in any operations(add, edit and delete).

  <listbox model="@load(vm.employeeGroupModel)" >
    <listhead sizable="true">
        <listheader label="Header1" width="20%"></listheader>
        <listheader label="Header2" width="20%"></listheader>
    <template name="model:group">
        <listgroup label="@load(each)" open="true"/> 
    <template name="model">
        <listitem fulfill="self.what.onOpen">
                <!-- Each listcell has two componenents, If user click on edit button, the edtable component will display -->
                <label visible="@bind(!vm.editMode)" value="@load(each.empId)"></label>
                <textbox visible="@bind(vm.editMode)" value="@load(each.empId)"></textbox>
                <label visible="@bind(!vm.editMode)" value="@load(each.joiningDate)"></label>
                <datebox visible="@bind(vm.editMode)" value="@load(each.joiningDate)"></datebox>


  1. Unable to apply fulfill attribute in listitem component.
  2. If i will be able to apply this attribute, then how i can make this in conditional basis. Means if i have less than 100 rows, then fulfill attribute should not apply and all the listgroups should render in expand mode.
  3. During add a new item or delete a item, i need to notify the whole groupModel which taking more time to repaint the DOM.
  4. i am facing an issue during expand/collapse. Some of the listgroup is not expanding/collapsing if i have large number of rows. i have the following logic for expanding/collapsing:

private void collapseAll() { List<listitem> items = listbox.getItems(); for (Listitem listitem : items) { if(listitem instanceof Listgroup) { ((Listgroup)listitem).setOpen(false); } } }

private void expandAll() { List<listitem> items = listbox.getItems(); for (Listitem listitem : items) { if(listitem instanceof Listgroup) { ((Listgroup)listitem).setOpen(true); } } }

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2017-11-02 01:36:40 +0800

MDuchemin gravatar image MDuchemin
1346 1 4
ZK Team

Hey mangaldaslima,

From experience in IE, this type of approach is just creating difficulty for yourself. Even if you close all other groups, if your current active group hold more than 500 lines, you are back to square one and you have no way to resolve this elegantly. Especially if you need to support large datasets in your list / grid, this should be done with render on demand. With ROD active, you will only render blank cells for listitems located outside of the screen, thus significantly reducing the rendering time in all browsers and very much in IE.

From your example, I don't see any height information on the listbox itself. You mentioned " without pagination and fixed height", does the fixed height part mean that you are trying to scroll the page instead of scrolling inside the listbox?

For ROD to be active, you must scroll inside the listbox (thus, either fixed height, or some type of vflex / height in % to fill in the rest of the available screen space. Have a look here for more details on ROD: https://www.zkoss.org/wiki/ZK%20Developer's%20Reference/Performance%20Tips/Listbox,%20Grid%20and%20Tree%20for%20Huge%20Data/Turn%20on%20Render%20on%20Demand

With ROD, you only render a few lines initially, and then update the page on demand. If your templates are complicated with a lot of entries, then it's definitely the best performance saver for Listbox/Grid. This should solve most of the rendering issue in IE. (even if you don't implement it in the end, it's worth giving it a try just to see the difference).

link publish delete flag offensive edit
Your answer
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

1 follower



Asked: 2017-11-01 17:24:26 +0800

Seen: 8 times

Last updated: Nov 02 '17

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