0

Listbox does not show all headers content

asked 2021-09-23 16:28:27 +0800

softteam gravatar image softteam
120 8

Hi,

I want my listbox to show all the content from its headers when it is empty. How can I do that?

Now an empty listbox looks like this: image description

And I would like headers like these, even if there is no data: image description

This is my listbox:

<listbox sizedByContent="true" mold="paging" pagingPosition="bottom" pageSize="10" span="5" 
                                                    xmlns:ca="client/attribute" ca:data-scrollable="false" model="@init(vm.listaBeansPlanTerapeutico)" 
                                                    emptyMessage="@init(vm.planTerapeuticoEM)" >
                                                    <custom-attributes org.zkoss.zul.listbox.autohidePaging="false"/>
                                                    <custom-attributes org.zkoss.zul.listbox.rod="true" scope="page"/>
                                                    <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)" onColVisiChanged="@command('colVisiChangedPT', index=1, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[1])" sclass="column-hide-button"    />
                                                        <listheader label="@load(vm.LHAreaPT)" sort="auto(area)" onColVisiChanged="@command('colVisiChangedPT', index=2, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[2])" sclass="column-hide-button"    />
                                                        <listheader  tooltiptext="@load(vm.sintomaGuiaPTTool)" sort="auto(sintomaGuia)" onColVisiChanged="@command('colVisiChangedPT', index=3, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[3])" sclass="column-hide-button"    >
                                                            <idspace>
                                                                <popup id="ppSintomaGuia">
                                                                    <label value="@load(vm.sintomaGuiaPTTool)"/>
                                                                </popup> 
                                                                <hlayout style="white-space: nowrap !important"><label value="@load(vm.LHSintomaGuiaPT)"/> <a iconSclass="z-icon-info-circle z-icon-lg" style="color:inherit; padding-right: 2px" popup="ppSintomaGuia" visible="@load(vm.dispositivoMovil)"/></hlayout>
                                                            </idspace>
                                                        </listheader>
                                                        <listheader tooltiptext="@load(vm.problemaPrioritarioPTTool)" sort="auto(problemaPrioritario)" onColVisiChanged="@command('colVisiChangedPT', index=4, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[4])" sclass="column-hide-button"    >
                                                            <idspace>
                                                                <popup id="ppProblemaPrioritario">
                                                                    <label value="@load(vm.problemaPrioritarioPTTool)"/>
                                                                </popup> 
                                                                <hlayout style="white-space: nowrap !important"><label value="@load(vm.LHProblemaPrioritarioPT)"/> <a iconSclass="z-icon-info-circle z-icon-lg" style="color:inherit; padding-right: 2px" popup="ppProblemaPrioritario" visible="@load(vm.dispositivoMovil)"/></hlayout>
                                                            </idspace>
                                                        </listheader>
                                                        <listheader label="@load(vm.LHProblemaPT)" sort="auto(problema)" onColVisiChanged="@command('colVisiChangedPT', index=5, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[5])" sclass="column-hide-button"    />
                                                        <listheader label="@load(vm.LHObjetivoPT)" sort="auto(objetivo)" onColVisiChanged="@command('colVisiChangedPT', index=6, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[6])" sclass="column-hide-button"    />
                                                        <listheader label="@load(vm.LHTratamientoPT)" sort="auto(tratamiento)" onColVisiChanged="@command('colVisiChangedPT', index=7, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[7])"     sclass="column-hide-button"/>
                                                        <listheader tooltiptext="@load(vm.ultimoSeguimientoPTTool)" sort="auto(fechaUltimoSeguimiento)" onColVisiChanged="@command('colVisiChangedPT', index=8, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[8])" sclass="column-hide-button"    >
                                                            <idspace>
                                                                <popup id="ppFechaUltSeg">
                                                                    <label value="@load(vm.ultimoSeguimientoPTTool)"/>
                                                                </popup> 
                                                                <hlayout style="white-space: nowrap !important"><label value="@load(vm.LHFechaUltimoSeguimientoPT)"/> <a iconSclass="z-icon-info-circle z-icon-lg" style="color:inherit; padding-right: 10px !important" popup="ppFechaUltSeg" visible="@load(vm.dispositivoMovil)"/></hlayout>
                                                            </idspace>
                                                        </listheader>
                                                        <listheader label="@load(vm.LHResultadoPT)" sort="auto(resultado)" onColVisiChanged="@command('colVisiChangedPT', index=9, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[9])" sclass="column-hide-button"  />
                                                        <listheader label="@load(vm.fechaResultadoPTTool)" sort="auto(fechaResultado)" onColVisiChanged="@command('colVisiChangedPT', index=10, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[10])" sclass="column-hide-button"  />
                                                        <listheader label="@load(vm.horaResultadoPTTool)" sort="auto(horaResultado)" onColVisiChanged="@command('colVisiChangedPT', index=11, visible=event.data.visible)" visible="@load(vm.columnVisibilitiesPT[11])" sclass="column-hide-button"  />
                                                    </listhead>
                                                    <template name="model" var="item">
                                                        <listitem >
                                                            <listcell label="@init(item.fechaDeclaracion)" style="text-align: center"/>
                                                            <listcell label="@init(item.horaDeclaracion)" style="text-align: center"/>
                                                            <listcell label="@init(item.area)" />
                                                            <listcell label="@init(item.sintomaGuia)" />
                                                            <listcell label="@init(item.problemaPrioritario)" />
                                                            <listcell label="@init(item.problema)" tooltiptext ="@init(item.problema)" style="@init(item.estilo)"/>
                                                            <listcell label="@init(item.objetivo)" tooltiptext ="@init(item.objetivo)" style="@init(item.estilo)"/>
                                                            <listcell label="@init(item.tratamiento)" tooltiptext ="@init(item.tratamiento)" style="@init(item.estilo)"/>
                                                            <listcell label="@init(item.fechaUltimoSeguimiento)" style="text-align: center"/>
                                                            <listcell label="@init(item.resultado)" style="text-align: center"/>
                                                            <listcell label="@init(item.fechaResultado)" style="text-align: center"/>
                                                            <listcell label="@init(item.horaResultado)" style="text-align: center"/>
                                                        </listitem>
                                                    </template>
                                                </listbox>

Thank you,

Javier

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2021-09-27 16:11:26 +0800

MDuchemin gravatar image MDuchemin
1986 1 5
ZK Team

Hey there Javier,

The SizedByContent doesn't affect the headers if there is no content.

You can achieve the same effect by using hflex="min" on the Listheader components instead. hflex="min" on listheader will check the content of the cells and the content of the headers when setting size.

Alternatively, you can customize the client-side JS function at zul.sel.Listbox.prototype._adjHeadWd to remove the check located here:

    if (!hdfaker || !bdfaker || !this.getBodyWidgetIterator().hasNext()) //!this.getBodyWidgetIterator().hasNext() is checking for items in the Listbox's rows. if no rows, it returns and do not update the header
        return;
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
1 follower

RSS

Stats

Asked: 2021-09-23 16:28:27 +0800

Seen: 7 times

Last updated: Sep 27

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