Problem with columns in Primefaces

1

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-->
    
asked by Gonzalo León 26.06.2017 в 19:07
source

1 answer

2

I found the solution to my problem here . You have to keep the property Visibility in a ManagedBean .

   @Named(value = "basicView")
    @ViewScoped
    public class BasicView implements Serializable {

    private List<Boolean> list;

    /**
     * Creates a new instance of BasicView
     */
    public BasicView() {
        list = Arrays.asList(true, true, true, true, true, true, true, true, true, true, true, true, true, true);
    }

    public List<Boolean> getList() {
        return list;
    }

    public void setList(List<Boolean> list) {
        this.list = list;
    }

    public void onToggle(ToggleEvent e) {
        list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
    }
    }

The button should look like this:

 <p:columnToggler datasource="asesorTable" trigger="toggler"> 
     <p:ajax event="toggle" listener="#{basicView.onToggle}"/>
 </p:columnToggler>

And in each column of the table the property is added: visible="#{basicView.list[0]}" . In my case I have 14 columns.

    
answered by 26.06.2017 в 19:46