First time here? Check out the FAQ!
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
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
Asked: 2021-02-10 03:08:27 +0800
Seen: 7 times
Last updated: Feb 17
bug with intboxes on mobile devices
zk keikai-how to add custom button/label to formulabar?
zk-keikai- update multiple cells parallel at same time asynchronously
zk-keikai-How to auto fit column width based on text
zk-keikai-ClipboardPateEvent-called twice
Reference a spring bean from VariableResolver