Can't close columntoggler after poll updates

问题:

First of all I'd like to thank Stack overflow for being such awesome and answering almost everything we need.But again I've stuck to something and need Help.My problem is that my columntoggler does not have a close button on the top right(So, when p:poll updates the datatable,toggle does not close and everytime I've to refresh the whole page :( ).So,Do we need jquery to add that or something that I'm doing wrong.Please suggest me.Thank you

<h:form rendered="#{bean.value!=null}"  >

    <p:dataTable id="tab" var="var" value="#{bean.value}" >

                 <f:facet name="header">
                    Header for dataTable
                    <p:commandButton style="float:right" id="toggler" type="button" value="Columns"  icon="ui-icon-calculator" />
                    <p:columnToggler datasource="tab" trigger="toggler">
                     <p:ajax event="toggle" listener="#{bean.onToggle}" />

                        </p:columnToggler>


                 </f:facet>
    <p:column visible="#{bean.list[0]}">
            <f:facet name="header"><h:outputText value="Start"/>
            </f:facet>
            <h:outputText value="#{var.startTime}">
                <f:convertDateTime pattern="dd.MM.yyyy" />
            </h:outputText>
        </p:column>

        <p:column visible="#{bean.list[1]}">
            <f:facet name="header"><h:outputText value="End"/>
            </f:facet>
            <h:outputText value="#{var.endTime}" >
                <f:convertDateTime pattern="dd.MM.yyyy"  />
            </h:outputText>
        </p:column>

        <p:column visible="#{bean.list[2]}">
            <f:facet name="header"><h:outputText value="Name"/>
            </f:facet>
            <h:outputText value="#{var.name}" >

            </h:outputText>
        </p:column>

        </p:dataTable>

        <p:poll interval="10"  update="tab" />
   </h:form>

回答1:

You should give your columnToggler a name so you can access it using PF('columnToggler') like this:

<p:columnToggler widgetVar="columnToggler" datasource="tab" trigger="toggler"/>

You can hide the columnToggler using PF() and/or with jquery. I found that when the table is updated while the column Toggler is open, there are multiple copies of it so you need to close them all with jquery too.

<p:poll inteval="10" update="tab" 
        oncomplete="PF('columnToggler').hide();$('.ui-columntoggler').hide();" />

I haven't tried it with poll but I used it with a p:ajax.

回答2:

Case 1: You can close the columnToggler, when the 'toggle event' is triggered, using PF('widgetVar').hide using onstart()/oncomplete() etc.

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"  
                  onstart="PF('colTogglerWidgetVar').hide();" />
</p:columnToggler>

Case 2: You can the columnToggler, even when the table is updated while the toggle event is triggered using PF().hide by using onstart() event only!! Because when you update the table, a new set of elements are add to page with the same signatures but the columnToggler which is still open to you will be the older one and hence if you try to close the columnTogller using the close button, it won't close. Since the dialog has lost its scope with the current state.

Therefore any other event other than onstart() wont serve the purpose.

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"   
                 onstart="PF('colTogglerWidgetVar').hide();" update="datatable"/>
</p:columnToggler>

If you wish to keep the dialog open,even after you hide the columnToggler, then go for showing the columnToggler again using PF().show with onComplete() combination

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"   
                 onstart="PF('colTogglerWidgetVar').hide();" 
                 oncomplete="PF('colTogglerWidgetVar').show();" update="datatable"  />
</p:columnToggler>