0

Adding an item into a rendered Listbox takes long time

asked 2021-02-10 03:08:27 +0800

fharids gravatar image fharids
1

updated 2021-02-12 12:48:20 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

Hello,

I have a problem with a listbox, when the listbox has more than 100 items it takes too long to add new items and show them.

This is the java code that adds new item to the listbox:

private List<DetalleRequerimiento> listarequerimientodet;

@Command("agregarDetallle")
@NotifyChange("listarequerimientodet") 

public void agregarDetallle(){        

   DetalleRequerimiento dd= new DetalleRequerimiento();
   if(this.requerimientodet.getIdcentrocostosap()!=null && this.requerimientodet.getIdcentrocostosap().getPrccode()!=null)
        dd.setCentrocostosap(this.requerimientodet.getIdcentrocostosap());
   else
        dd.setCentrocostosap(null);

   this.listarequerimientodet.add(dd);

}

listarequerimientodet is a List asociated to the listbox for rendering the items, this is the code in the zul file:

<listbox id="listadet" hflex="1" vflex="1" model="@load(vm.listarequerimientodet)"  checkmark="true" multiple="true" mold="paging" pageSize="250"   >

<listhead  sizable="true">
    <listheader label="#" hflex="min"/>
    <listheader align="center" hflex="min">                                                 
          <button visible="@load(vm.editar)" disabled="@load(vm.bot)" onClick="@command('agregarDetallle')"  tooltiptext="Nuevo Registro" iconSclass="z-icon-plus-square z-icon-lg" />                                                                                                                                               
    </listheader>
    <listheader label="Codigo"  sort="auto(ccodigosap)" hflex="min"/>
    <listheader label="Descripcion"  sort="auto(cdescripcion)" hflex="min"/>
    <listheader label="Unidad"  sort="auto(cunimed)" hflex="min"/>
    <listheader label="Cantidad"  sort="auto(ncantidad)" hflex="min"/>
    <listheader label="Ult. Costo"  sort="auto(ncostopromedio)" hflex="min"/>
    <listheader label="Total"  sort="auto(ncostopromedio)" hflex="min"/>
    <listheader label="Moneda" sort="auto(cmoneda)"  hflex="min"/>
    <listheader label="Codigo CC" sort="auto(idcentrocosto)"  hflex="min"/>
    <listheader label="Centro Costo" sort="auto(ccentrocosto)"  hflex="min"/>
</listhead>
<template name="model" var="item" status="s">
    <listitem >
        <listcell label="@load(s.index+1)"/>
        <listcell  >                                         
                    <toolbarbutton  hflex="min" tooltiptext="Eliminar Registro" 
                                    disabled="@load(vm.bot)"
                                    visible="@load(vm.editar)"
                                    onClick="@command('eliminarRegistro', i=s.index , ls=listadet)" 
                                    iconSclass="z-icon-trash z-icon-lg" />                                                            
        </listcell>
        <listcell>
            <hbox>
                <textbox readonly="@load(empty item.idexistencia ? 'false' : 'true')" 
                        disabled="@load(vm.bot)"
                        value="@bind(item.ccodigosap)" 
                        onOK="@command('buscarArticulo',tbida=self.parent, det=item)" 
                        onCancel="@command('buscarArticulo',tbida=null, det=item)"
                        width="100px" />
                <toolbarbutton      disabled="@load(vm.bot)"
                                    hflex="min" tooltiptext="Buscar Articulo" 
                                    onClick="@command('buscarArticulo', tbida=self.parent , det=item)" 
                                    iconSclass="z-icon-search z-icon-lg" />
            </hbox>
        </listcell>
        <listcell><label value="@bind(item.cdescripcion)" /></listcell>
        <listcell><label value="@load(item.cunimed)" /></listcell>
        <listcell><decimalbox value="@bind(item.ncantidad)" disabled="@load(vm.bot)" onChange="@command('actualizaDet',det=item)" format="###,##0.00"  style="text-align:right"  /></listcell>
        <listcell><decimalbox readonly="true" value="@load(item.ncostoult) "  format="###,##0.00" style="text-align:right"  /></listcell>
        <listcell><decimalbox readonly="true" value="@load(item.ntotal)"  format="###,##0.00" style="text-align:right" /></listcell>
        <listcell><label value="@load(item.cmonedault)"   /></listcell>
        <listcell>
            <hbox>
                <textbox readonly="@load(empty item.centrocostosap ? 'false' : 'true')" 
                        value="@bind(item.idcentrocosto)" 
                        onOK="@command('buscarCentroCosto',tbida=self.parent,li=self.parent.parent.parent, det=item)" 
                        onCancel="@command('buscarCentroCosto',tbida=null,li=null, det=item)"
                        width="100px" disabled="@load(vm.bot)" />
                <toolbarbutton  hflex="min" tooltiptext="Buscar Centro Costo"  disabled="@load(vm.bot)"
                                onClick="@command('buscarCentroCosto',li=self.parent.parent.parent, tbida=self.parent , det=item)" 
                                iconSclass="z-icon-search z-icon-lg" />
            </hbox>
        </listcell>
        <listcell><label value="@load(item.ccentrocosto)"   /></listcell>
    </listitem>
</template>
<listfoot >

                   <listfooter />
                   <listfooter />
                   <listfooter />
                   <listfooter />
                   <listfooter />                                           
                   <listfooter /> 
                   <listfooter />                                                               
                   <listfooter />                                                                
                   <listfooter />
                    <listfooter />


</listfoot>
</listbox>

When i click the button that calls the function 'Agregar Detalle' and my listbox already has more than 100 items it takes too long to show the new item. I need it to be way faster:

Please help me, it would be very useful for my testing

Regards

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2021-02-17 12:41:49 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

updated 2021-02-17 12:42:48 +0800

remove the @NotifyChange("listarequerimientodet") change annotation, this will cause the whole model to re-render ALL rows in your grid.

In order to update individual items, create the collection listarequerimientodet as a ListModelList. This will allow adding/removing individual items without re-rendering everything. The ListModelList will notify the <listbox> directly about updated rows, no need to trigger @NotifyChange on the whole list.

related article: https://www.zkoss.org/wiki/SmallTalks/2016/March/ZKDosandDonts#NotifyingthewholeListModelon_change

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

Follow
2 followers

RSS

Stats

Asked: 2021-02-10 03:08:27 +0800

Seen: 7 times

Last updated: Feb 17

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