how to fix ListGroupModel performance issue

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

mangaldaslima
11 ● 2

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

cor3000
6280 ● 2 ● 7

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>
        ...
    </listhead>
    <template name="model:group">
        <listgroup label="@load(each)" open="true"/> 
    </template>
    <template name="model">
        <listitem fulfill="self.what.onOpen">
            <listcell>
                <!-- 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>
            </listcell>
            <listcell>
                <label visible="@bind(!vm.editMode)" value="@load(each.joiningDate)"></label>
                <datebox visible="@bind(vm.editMode)" value="@load(each.joiningDate)"></datebox>
            </listcell>
            ...
        </listitem>
    </template>
</listbox>

Issues:

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); } } }