0

Rendering time in a grid

asked 2020-10-27 01:35:14 +0800

softteam gravatar image softteam
120 8

Hi,

I got a grid with a detail and inside this detail, 3 tabs: the first one with only a bean, the second one with some labels and 5 listbox and the third one with another listbox.

This grid and all listbox inside are filled with ListModelList. I use the same variables to all details because only one details is going to be open, so when the user opens another detail, the first one is closed and the variables cleared.

I realised that if I use pageSize="10" or "25" for this grid, all works fine. But if I use a pagesize of 100 or more, rendering becomes very slow. I tested processes that obtain the data and all of them last the same whatever pagesize is, so I suppose render is the cause.

In this case, what is the best way to render the data in order to keep a good render time?

I attach the structure of the .zul:

<grid id="GRIDCenso" sclass="GRIDCenso" mold="paging" pagingPosition="bottom" span="true" sizedByContent="true" pageSize="10" width="100%" xmlns:a="client/attribute" a:data-scrollable="false" emptyMessage="@load(vm.censoEM)"
        model="@load(vm.beans)">
    <custom-attributes org.zkoss.zul.grid.autohidePaging="false"/>
    <custom-attributes org.zkoss.zul.image.preload="true"/>
        <columns menupopup="auto-keep" sizable="true">

        </columns>
        <rows >          
             <template name="model" var="item" visible="false">
                <row value="@load(item)" onClick="@command('SeleccionRowEstilo',evento=event.getTarget())" >
                    <detail open="false" onCustom="@command('abrirDetalle',evento=event.getTarget())"> 
                           <hlayout  visible="@load(vm.valoracionClinica)"  >
                               <div sclass="details" hflex="1">
                                   <tabbox  sclass="nav_tabs" style="overflow-y:auto;"  >

                                    <tabs >
                                        <tab label="@load(vm.TTabMotivoIngr)" onCustom="@command('mostrarValoracionIngreso',evento=event.getTarget())"/>
                                        <tab label="@load(vm.TTabDiagnos)" onCustom="@command('mostrarDiagnosticos',evento=event.getTarget())"/>
                                        <tab label="@load(vm.TTabPlanTerape)" onCustom="@command('mostrarPlanTerapeutico',evento=event.getTarget())"/>
                                    </tabs>

                                    <tabpanels>
<!--                                    MOTIVO INGRESO  -->
                                        <tabpanel>
                                            <vlayout  >
                                                <label value="@load(vm.TMotivo)" style="color:#0078c1"/>
                                                <div class="well well-lg" ><label value="@load(vm.motivoIngresoBean.motivo)"/></div>
                                                <label value="@load(vm.TEnfermedadActual)" style="color:#0078c1"/>
                                                <div class="well well-lg"><label value="@load(vm.motivoIngresoBean.enfermedad)"/></div>
                                                <label style="color:#0078c1">_______________________________________</label>
                                                <label value="@load(vm.motivoIngresoBean.facultativoFechaHora)" style="color:#0078c1"/>
                                            </vlayout>
                                        </tabpanel>

<!--                                    DIAGNOSTICO --> 
                                        <tabpanel>
                                            <vlayout>
                                                <hlayout><div width="65px"><label value="@load(vm.TPrincipal)" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipal.codigo)"/><label value="@load(vm.diagnosticoPrincipal.descripcion)"/></hlayout >
                                                <hlayout><div width="65px"><label value="POA" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipal.POA)"/></hlayout>

                                                <listbox sizedByContent="true" span="1" width="99%" xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansDiagnosticosSecundarios)" emptyMessage="@load(vm.diagnosticoSecundarioEM)" visible="@load(vm.visibleDiagnosticoS)">  
                                                    <listhead>
                                                        <listheader label="@load(vm.LHCodigo)"  sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
                                                        <listheader label="@load(vm.LHDiagnosticoSec)" sort="auto(descripcion)"/>
                                                        <listheader label="POA" hflex="min" sort="auto(POA)"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.codigo)" />
                                                            <listcell label="@load(item.descripcion)" />
                                                            <listcell label="@load(item.POA)" />
                                                        </listitem>
                                                    </template>
                                                </listbox>

                                                <hlayout style="margin-top:10px"><div width="136px"><label value="@load(vm.TLugarAccidente)" style="color:#0078c1"/></div><label value="@load(vm.datosAccidente.descripcion)"/></hlayout>
                                                <hlayout><div width="136px"><label value="@load(vm.TCausaExterna)" style="color:#0078c1"/></div><label value="@load(vm.causaExterna.descripcion)"/></hlayout>
                                                <hlayout><div width="136px"><label value="@load(vm.TPOACausaExterna)" style="color:#0078c1"/></div><label value="@load(vm.causaExterna.POA)"/></hlayout>

                                                <listbox sizedByContent="true" span="1" width="99%"  emptyMessage="@load(vm.otrasCausasExternasEM)" model="@load(vm.listaBeansOtrasCausasExternas)" visible="@load(vm.visibleOtrasCausasEx)">
                                                <custom-attributes org.zkoss.zul.nativebar="false"/> 
                                                   <listhead>
                                                        <listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
                                                        <listheader label="@load(vm.LHOtrasCausasExt)" sort="auto(descripcion)"/>
                                                        <listheader label="POA" hflex="min" sort="auto(POA)"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.codigo)" />
                                                            <listcell label="@load(item.descripcion)" />
                                                            <listcell label="@load(item.POA)" />
                                                        </listitem>
                                                    </template>
                                                </listbox>

                                                <hlayout style="margin-top:10px"><label value="@load(vm.TProcedimientoPrincipal)" style="color:#0078c1"/><label value="@load(vm.procedimientoPrincipal.codigo)" style="padding-left:12px"/><label value="@load(vm.procedimientoPrincipal.descripcion)"/></hlayout>

                                                <listbox sizedByContent="true" span="1" width="99%" emptyMessage="@load(vm.otrosProcedimientosEM)" xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansOtrosProcedimientos)" visible="@load(vm.visibleOtrosProcedimientos)">
                                                     <listhead>
                                                        <listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
                                                        <listheader label="@load(vm.LHOtrosProcedimientos)" sort="auto(descripcion)"/>
                                                        <listheader label="POA" hflex="min" sort="auto(POA)"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.codigo)" /> 
                                                            <listcell label="@load(item.descripcion)" />
                                                            <listcell label="@load(item.POA)" />
                                                        </listitem>
                                                    </template>
                                                </listbox>

                                                <hlayout style="margin-top:10px"><label value="@load(vm.TProcedimientoExteriorPrincipal)" style="color:#0078c1"/><label value="@load(vm.procedimientoExteriorPrincipal.codigo)" style="padding-left:12px"/><label value="@load(vm.procedimientoExteriorPrincipal.descripcion)"/></hlayout>

                                                <listbox sizedByContent="true" span="1" width="99%"  emptyMessage="@load(vm.otrosProcedimientosExternosEM)" model="@load(vm.listaBeansOtrosProcedimientosExteriores)" visible="@load(vm.visibleOtrosProcedimientosExt)">
                                                <custom-attributes org.zkoss.zul.nativebar="false"/> 
                                                    <listhead>
                                                        <listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
                                                        <listheader label="@load(vm.LHOtrosProcedimientosExt)" sort="auto(descripcion)"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.codigo)" />
                                                            <listcell label="@load(item.descripcion)" />
                                                        </listitem>
                                                    </template>
                                                </listbox>

                                                <listbox sizedByContent="true" span="1" width="99%"  emptyMessage="@load(vm.morfologiasNeoplasiaEM)" model="@load(vm.listaBeansMorfologiasNeoplasia)" visible="@load(vm.visibleMorfologiasNeoplasias)">
                                                <custom-attributes org.zkoss.zul.nativebar="false"/> 
                                                     <listhead>
                                                        <listheader label="@load(vm.LHCodigo)" sort="auto(codigo)" hflex="min" visible="@load(!vm.dispositivoMovil)"/>
                                                        <listheader label="@load(vm.LHMorfologiasNeoplasias)" sort="auto(descripcion)"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.codigo)" /> 
                                                            <listcell label="@load(item.descripcion)"/> 
                                                        </listitem>
                                                    </template>
                                                </listbox>
                                            </vlayout>
                                        </tabpanel>

<!--                            PLAN TERAPEUTICO  --> 
                                        <tabpanel >
                                            <vlayout>
                                                <hlayout><div width="65px"><label value="@load(vm.TPrincipal)" style="color:#0078c1"/></div><label value="@load(vm.diagnosticoPrincipalPT.codigo)"/><label value="@load(vm.diagnosticoPrincipalPT.descripcion)"/></hlayout>

                                                <listbox sizedByContent="true" mold="paging" pagingPosition="bottom"  autopaging="true" pageSize="10" span="true" 
                                                    width="99%" height="95%"  xmlns:ca="client/attribute" ca:data-scrollable="false" model="@load(vm.listaBeansPlanTerapeutico)" 
                                                    emptyMessage="@load(vm.planTerapeuticoEM)" >
                                                    <custom-attributes org.zkoss.zul.listbox.autohidePaging="false"/>
                                                    <listhead  menupopup="auto-keep" sizable="true">
                                                        <listheader label="@load(vm.LHFechaDeclaracionPT)" tooltiptext="@load(vm.fechaDeclaracionPTTool)" sort="auto(fechaDeclaracion)"  onColVisiChanged="@command('colVisiChangedPT', index=0, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[0])"/>
                                                        <listheader label="@load(vm.LHHoraDeclaracionPT)" tooltiptext="@load(vm.horaDeclaracionPTTool)" sort="auto(horaDeclaracion)" width="90px" onColVisiChanged="@command('colVisiChangedPT', index=1, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[1])"/>
                                                        <listheader label="@load(vm.LHAreaPT)" sort="auto(area)" onColVisiChanged="@command('colVisiChangedPT', index=2, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[2])"/>
                                                        <listheader label="@load(vm.LHSintomaGuiaPT)" tooltiptext="@load(vm.sintomaGuiaPTTool)" sort="auto(sintomaGuia)" width="85px" onColVisiChanged="@command('colVisiChangedPT', index=3, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[3])"/>
                                                        <listheader label="@load(vm.LHProblemaPrioritarioPT)" tooltiptext="@load(vm.problemaPrioritarioPTTool)" sort="auto(problemaPrioritario)" onColVisiChanged="@command('colVisiChangedPT', index=4, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[4])"/>
                                                        <listheader label="@load(vm.LHProblemaPT)" sort="auto(problema)" onColVisiChanged="@command('colVisiChangedPT', index=5, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[5])"/>
                                                        <listheader label="@load(vm.LHObjetivoPT)" sort="auto(objetivo)" onColVisiChanged="@command('colVisiChangedPT', index=6, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[6])"/>
                                                        <listheader label="@load(vm.LHTratamientoPT)" sort="auto(tratamiento)" onColVisiChanged="@command('colVisiChangedPT', index=7, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[7])"/>
                                                        <listheader label="@load(vm.LHFechaUltimoSeguimientoPT)" tooltiptext="@load(vm.ultimoSeguimientoPTTool)" sort="auto(fechaUltimoSeguimiento)" class="minWidthUltSeg" onColVisiChanged="@command('colVisiChangedPT', index=8, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[8])"/>
                                                        <listheader label="@load(vm.LHResultadoPT)" sort="auto(resultado)" class="minWidthResultado" onColVisiChanged="@command('colVisiChangedPT', index=9, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[9])"/>
                                                        <listheader label="@load(vm.LHFechaResultadoPT)" tooltiptext="@load(vm.fechaResultadoPTTool)" sort="auto(fechaResultado)" class="minWidthFechaRes" onColVisiChanged="@command('colVisiChangedPT', index=10, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[10])"/>
                                                        <listheader label="@load(vm.LHHoraResultadoPT)" tooltiptext="@load(vm.horaResultadoPTTool)" sort="auto(horaResultado)"  class="minWidthHoraRes" onColVisiChanged="@command('colVisiChangedPT', index=11, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[11])"/>
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@load(item.fechaDeclaracion)" />
                                                            <listcell label="@load(item.horaDeclaracion)" />
                                                            <listcell label="@load(item.area)" />
                                                            <listcell label="@load(item.sintomaGuia)" />
                                                            <listcell label="@load(item.problemaPrioritario)" />
                                                            <listcell label="@load(item.problema)" tooltiptext ="@load(item.problema)" style="@load(item.estilo)"/>
                                                            <listcell label="@load(item.objetivo)" />
                                                            <listcell label="@load(item.tratamiento)" />
                                                            <listcell label="@load(item.fechaUltimoSeguimiento)" class="minWidthUltSeg"/>
                                                            <listcell label="@load(item.resultado)" class="minWidthResultado"/>
                                                            <listcell label="@load(item.fechaResultado)" class="minWidthFechaRes"/>
                                                            <listcell label="@load(item.horaResultado)" class="minWidthHoraRes"/>
                                                        </listitem>
                                                    </template>
                                                </listbox>
                                            </vlayout>
                                        </tabpanel>
                                    </tabpanels>
                                </tabbox>
                               </div>  
                           </hlayout>

                           <vlayout   visible="@load(!vm.valoracionClinica)" >
                                <div >
                                    <a iconSclass="z-icon-plus z-icon-lg" tooltiptext="_Nuevo" sclass="aHerramientas"></a>
                                    <a iconSclass="z-icon-pencil z-icon-lg" tooltiptext="_Editar" sclass="aHerramientas"></a>
                                    <a iconSclass="z-icon-ellipsis-v z-icon-lg" tooltiptext="_Opciones" sclass="aHerramientas"></a>
                                    <a iconSclass="z-icon-trash z-icon-lg" tooltiptext="_Borrar" sclass="aHerramientas"></a>                                    
                                </div>
                                <div visible="false"  sclass="cursoEvolutivo" style="padding:10px">
                                    <div style="padding-bottom:5px;display:inline-block" width="100%">
                                        <checkbox label="Nota de especial atención"/>
                                        <checkbox label="Incluir apunte en informes"/>
                                        <checkbox label="Notificación a la familia"/>
                                    </div>
                                    <ckeditor width="100%" height="100%" customConfigurationsPath="/recursos/js/BarrasCkeditor/CKBarraMinima.js"  toolbar="MiToolbar" >
                                    </ckeditor>
                                    <hlayout style="padding-top:5px;">
                                        <button label="Guardar"/>
                                        <button label="Cancelar"/>
                                    </hlayout>
                                </div>
                                <div sclass="cursoEvolutivo"  >
                                    <div style="border-bottom:1px solid #0078c1;padding:10px;display:table;" width="100%" >
                                        <div style="display:table-cell;width:33%">
                                            <label value="13/07/2019  9:15:00"/>
                                            <label value="Usuario creador sts"/>
                                        </div>
                                        <div style="display:table-cell;width:33%;text-align:center"  ><label value="Nota de especial atención"/></div>
                                        <div style="display:table-cell;width:33%;text-align:right"><label value="PALLARES FERNÁNDEZ,ESTHER"/></div>
                                    </div>
                                    <div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
                                    <div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
                                    <div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
                                    <div style="padding:10px;" height="99%" width="99%"><html height="99%" width="99%" /></div>
                                </div>

                            </vlayout>

                       </detail>
                    <cell><label value="@load(item.cama)"/></cell>
                    <cell><label value="@load(item.NHC)"/></cell>
                    <cell style="@load(item.estiloAislamiento)"><label value="@load(item.nombrePaciente)" tooltiptext="@load(item.motivoAislamiento)"/></cell>
                    <cell><label value="@load(item.edad)"/></cell>
                    <cell><label value="@load(item.sexo)"/></cell>
                    <cell style="@load(item.estilo)"><label value="@load(item.nivelDescripcion)" tooltiptext="@load(item.nivelDescripcion)"/></cell>
                    <cell><label value="@load(item.especialidad)"/></cell>
                    <cell><label value="@load(item.estadoIngreso)"/></cell>
                    <cell><label value="@load(item.estadoPrescripcion)"/></cell>
                    <cell><image src="@load(item.situacionPrescipcion)" tooltiptext="@load(item.situacionPrescipcionDescripcion)"/></cell>
                    <cell><label value="@load(item.estanciasString)"/></cell>
                </row>
            </template>
        </rows>
    </grid>
delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
0

answered 2020-10-27 11:39:09 +0800

hawk gravatar image hawk
2690 1 5
http://hawkphoenix.blogsp... ZK Team

If the bottleneck is the component rendering time then the solution is to reduce the number of components to render. You should make the page render as few as components at first, render those necessary, visible components first, and render others when it's needed.

enable "render on demand"

https://www.zkoss.org/wiki/ZKDeveloper%27sReference/PerformanceTips/Listbox,GridandTreeforHugeData/TurnonRenderon_Demand So ZK will render those components on the current page since the grid is in "paging" mold.

replace "visible" with <if>

original: <hlayout visible="@load(vm.valoracionClinica)" >

better: <if test="@load(vm.valoracionClinica)" >

Then when vm.valoracionClinica is false, ZK doesn't create its child components which saves the rendering time.

Create a Tabpanel after Its Tab is Selected

Since each tabpanel in the <detail> contains high-rendering-cost child components, it's better to create them only when a user selects the tab. Please refer to https://www.zkoss.org/wiki/ZKDeveloper%27sReference/UIComposing/ZUML/On-demandEvaluation#CreateaTabpanelafterItsTabis_Selected

replace @load with @init

I saw you use lots of @load like <listcell label="@load(item.codigo)" />

If such a label doesn't change dynamically, then it's better to use @init. Then it saves some time and memory and avoids ZK creating unnecessary tracking nodes.

link publish delete flag offensive edit

Comments

Hi!

Thanks, really good tips!

One thing more, I would like to know if the right way to replace "visible" with < if > is:

Original:

&lt;hlayout  visible="@load(vm.valoracionClinica)"&gt;
&lt;/hlayout&gt;

Better:

&lt;hlayout&gt;
  &lt;if test="@load(vm.valoracionClinica)" /&gt;
&lt;/hlayout&gt;
softteam ( 2020-10-27 23:49:07 +0800 )edit

you surround the element to render/not render with and if-element

<if test="@load(vm.valoracionClinica)" /> <hlayout> ... </hlayout> </if>

cor3000 ( 2020-10-28 09:17:39 +0800 )edit

Hi, I am working with this grid again and we are using Grid.setPageSize() in order to show all data in a single page, we are setting 236 as page size and its render time is 4-5 seconds. It is normal? Is there any way to reduce this time?

Thank you!

softteam ( 2020-11-17 20:43:45 +0800 )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
1 follower

RSS

Stats

Asked: 2020-10-27 01:35:14 +0800

Seen: 13 times

Last updated: Oct 27

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