I have a CRUD made with Primefaces, it works great except for one incident that I hardly noticed:
It works fine, but I noticed an incident, when selecting a column with ColumnToggler:
Disappears normally:
But if I change the columns to be displayed per page or I give it next in the pagination, it does this to me:
Unfold the last columns. This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Administración de Asesores</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="120" resizable="false" closable="true" collapsible="true">
<div class="ui-g">
<div class="ui-g-3"><p:graphicImage name="images/logo.png"/></div>
<div class="ui-g-5"></div>
<div class="ui-g-4">
</div>
</div>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form>
<p:dataTable id="asesorTable" var="asesor" value="#{asesorManagedBean.asesores}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters} {RowsPerPageDropdown}"
paginator="true" style="margin-bottom:20px;font-size:11px" rows="5" rowStyleClass="#{asesor.id == '100' ? 'ui-helper-hidden' : ''}"
rowsPerPageTemplate="5,10,15">
<f:facet name="{Exporters}">
<h:commandLink>
<p:graphicImage name="images/PDF.png" width="24"/>
<p:dataExporter type="pdf" target="asesorTable" fileName="ListaAsesores" pageOnly="true" />
</h:commandLink>
<h:commandLink>
<p:graphicImage name="images/EXCEL.png" width="24"/>
<p:dataExporter type="xls" target="asesorTable" fileName="ListaAsesores" pageOnly="true"/>
</h:commandLink>
</f:facet>
<f:facet name="header">
<p:commandButton value="Agregar" onclick="PF('dlg1').show();" action="#{asesorManagedBean.asesores}" style=" float: right"/>
<p:commandButton id="toggler" type="button" value="Columns" icon="ui-icon-calculator" style=" float: none" />
<p:columnToggler datasource="asesorTable" trigger="toggler" />
</f:facet>
<p:column headerText="Id" filterBy="#{asesor.id}" style="width:50px" filterStyle="width:80%">
<h:outputText value="#{asesor.id}" />
</p:column>
<p:column headerText="Usuario" filterBy="#{asesor.username}" style="width:50px" filterStyle="width:80%">
<h:outputText value="#{asesor.username}" />
</p:column>
<p:column headerText="Password" filterBy="#{asesor.password}" style="width:80px" filterStyle="width:80%">
<h:outputText value="#{asesor.password}" />
</p:column>
<p:column headerText="ID SIEBEL" filterBy="#{asesor.idAsesorSiebel}" style="width:50px" filterStyle="width:80%">
<h:outputText value="#{asesor.idAsesorSiebel}" />
</p:column>
<p:column headerText="Nombre" filterBy="#{asesor.nombre}" style="width:90px" filterStyle="width:80%">
<h:outputText value="#{asesor.nombre}" />
</p:column>
<p:column headerText="Paterno" filterBy="#{asesor.apPaterno}" style="width:90px" filterStyle="width:80%">
<h:outputText value="#{asesor.apPaterno}" />
</p:column>
<p:column headerText="Materno" filterBy="#{asesor.apMaterno}" style="width:90px" filterStyle="width:80%">
<h:outputText value="#{asesor.apMaterno}" />
</p:column>
<p:column headerText="Sucursal" filterBy="#{asesor.sucursal}" style="width:90px" filterStyle="width:80%">
<h:outputText value="#{asesor.sucursal}" />
</p:column>
<p:column headerText="Estatus" filterBy="#{asesor.estatus}" style="width:50px" filterStyle="width:80%">
<h:outputText value="#{asesor.estatus}" />
</p:column>
<p:column headerText="IdAndroid" filterBy="#{asesor.idAndroid}" style="width:60px" filterStyle="width:80%">
<h:outputText value="#{asesor.idAndroid}" />
</p:column>
<p:column headerText="Respaldo" filterBy="#{asesor.respaldo}" style="width: 60px" filterStyle="width:80%">
<h:outputText value="#{asesor.respaldo}" />
</p:column>
<p:column headerText="FireBase" filterBy="#{asesor.fireBase}" style="width: 150px" filterStyle="width:80%">
<h:outputText value="#{asesor.fireBase}" />
</p:column>
<p:column headerText="Editar" exportable="false" style="width:60px" toggleable="false">
<p:commandButton action="#{editarAsesorManagedBean.edit}" oncomplete="PF('dlg2').show();"
value="Editar"
update=":editarAsesorForm:panelEdit">
<f:setPropertyActionListener value="#{asesor}" target="#{editarAsesorManagedBean.selectedAsesor}" />
</p:commandButton>
</p:column>
<!--Borrar Asesor-->
<p:column headerText="Eliminar" exportable="false" style="width:80px" toggleable="false">
<p:commandButton value="Eliminar" update="asesorTable" oncomplete="PF('dlg').show();" >
<f:setPropertyActionListener value="#{asesor}" target="#{eliminarAsesorManagedBean.selectedAsesor}" />
</p:commandButton>
</p:column>
<!--Fin Borrar Asesor-->
</p:dataTable>
</h:form>
<p:commandButton value="Salir" action="#{loginManageBean.logout()}" style="float: right" />
</p:layoutUnit>
<!--Borrar Asesor Dialogo-->
<h:form id="formEliminar">
<p:confirmDialog id="dlg" widgetVar="dlg" header="Eliminar" message="¿Desea eliminar?">
<p:commandButton value="Si" action="#{eliminarAsesorManagedBean.eliminarAsesor()}"
oncomplete="PF('dlg').show();" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" onclick="dlg.hide();" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:form>
<!--Fin Borrar Asesor Dialogo-->