I'm using the p:columnToggler as follow:
Code: Select all
<p:dataTable id="resultDataTable" var="dto" value="#{fctMainController.dtos}" paginator="true"
paginatorPosition="top" rows="20" scrollHeight="#{fctMainController.scrollHeight}" scrollable="true"
currentPageReportTemplate="#{msg['all.label.currentPageReportTemplate']}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {MyContent}"
rowsPerPageTemplate="20,50,100,250,#{msg['all.label.all']}" emptyMessage="#{msg['all.label.noDataFound']}"
widgetVar="resultDataTableVar"
tableStyle="table-layout:fix;width:100%;" draggableColumns="true" resizableColumns="true">
<f:facet name="{MyContent}">
<p:commandButton id="toggler" type="button" icon="ui-icon-calculator" />
<p:columnToggler datasource="resultDataTable" trigger="toggler" id="resultDataTableToggler">
<p:ajax event="toggle" listener="#{fctMainController.onToggle}" oncomplete="fixDatatableScrollPaneHeight();" />
</p:columnToggler>
</f:facet>
<p:ajax event="colReorder" listener="#{fctMainController.onReorder}"/>
<p:ajax event="colResize" listener="#{fctMainController.onResize}"/>
<p:ajax event="page" onstart="loadPage()" oncomplete="loadPageDone()" />
<p:ajax event="sort" onstart="loadPage()" oncomplete="loadPageDone()" />
<p:column id="tab1_pn" styleClass="align_left" sortBy="#{dto.userId}" headerText="#{msg['all.label.pn']}" toggleable="false" width="50">
<h:outputText value="#{dto.userId}"/>
</p:column>
<p:column id="tab1_userName" styleClass="align_left" headerText="#{msg['all.label.employee']}" sortBy="#{dto.userName}"
visible="#{fctMainController.isColVisible(1)}">
<h:outputText value="#{dto.userName}"/>
</p:column>
<p:column id="tab1_homeNode" styleClass="align_left" headerText="#{sessionUtil.shopHeaderText}" sortBy="#{dto.homeNode.id}"
visible="#{sessionUtil.shopSelectRendered and fctMainController.isColVisible(2)}" toggleable="#{sessionUtil.shopSelectRendered}">
<h:outputText converter="#{shopNameConverter}" value="#{dto.homeNode}"/>
</p:column>
<p:column id="tab1_date" styleClass="align_left valign_middle" headerText="#{msg['all.label.date']}" sortBy="#{dto.calendarDate}"
toggleable="false" width="105">
<h:outputText value="#{dto.calendarDate}" style="font-family: courier new;">
<f:convertDateTime pattern="EEE " timeZone="CET"/>
</h:outputText>
<h:outputText value="#{dto.calendarDate}" >
<f:convertDateTime pattern="dd.MM.yyyy" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column id="tab1_absenceType" styleClass="align_left" headerText="#{msg['all.label.absenceType']}" sortBy="#{dto.absenceTypeForSort}"
toggleable="false">
<h:outputText converter="#{absenceTypeCodeTextConverter}" value="#{dto.absenceType}" style="vertical-align:middle;"/>
</p:column>
<p:column id="tab1_halfDayType" styleClass="align_left" headerText="#{msg['pla503.label.halfDayType']}" sortBy="#{dto.halfDayTypeStr}"
width="80" visible="#{fctMainController.isColVisible(5)}">
<h:outputText converter="#{codeTextConverter}" value="#{dto.halfDayTypeStr}" />
</p:column>
<p:column id="tab1_timeValue" styleClass="align_left" headerText="#{msg['pla503.label.timeValue']}" sortBy="#{dto.timeValue}"
rendered="#{fctMainController.showTimeValue}" visible="#{fctMainController.isColVisible(6)}" width="80">
<h:outputText value="#{dto.timeValueAsTime}" converter="#{timeConverter}" />
</p:column>
<p:column id="tab1_timeFrom" styleClass="align_left" sortBy="#{dto.timeFrom}" headerText="#{msg['all.label.timeFrom']}"
rendered="#{fctMainController.showTimeValue}" visible="#{fctMainController.isColVisible(7)}" width="80">
<h:outputText value="#{dto.timeFrom}" >
<f:convertDateTime pattern="HH:mm" timeZone="CET" locale="de_CH"/>
</h:outputText>
</p:column>
<p:column id="tab1_timeTo" styleClass="align_left" sortBy="#{dto.timeTo}" headerText="#{msg['all.label.timeTo']}"
rendered="#{fctMainController.showTimeValue}" visible="#{fctMainController.isColVisible(8)}" width="80">
<h:outputText value="#{dto.timeTo}" >
<f:convertDateTime pattern="HH:mm" timeZone="CET" locale="de_CH"/>
</h:outputText>
</p:column>
<p:column id="tab1_pk" styleClass="align_left" headerText="#{msg['all.label.pk']}" sortBy="#{dto.pk}" visible="#{fctMainController.isColVisible(9)}">
<h:outputText value="#{dto.pk}"/>
</p:column>
<p:column id="tab1_serial" styleClass="align_left" width="20" toggleable="false">
<h:graphicImage id="planOpenIcon" url="#{stylesheetManager.imageDir}serie.png" alt="#{msg['all.label.serie']}" title="#{msg['all.label.serie']}"
style="border:none;vertical-align:middle;" rendered="#{dto.domainObject.userAbsenceDefinition != null}"/>
</p:column>
<p:column id="tab1_action" styleClass="align_left" headerText="#{msg['all.label.action']}" rendered="#{fctMainController.writeAccess}"
wxportable="false" toggleable="false" width="100">
<p:commandLink id="editAbsence" title="#{dto.editableMsg}" disabled="#{!dto.editable}" oncomplete="saveScrollPos();PF('crudDialog').show()" update=":crudFormModal">
<h:graphicImage id="editIcon" url="#{stylesheetManager.imageDir}edit.png" alt="#{dto.editableMsg}" title="#{dto.editableMsg}" style="border:none;"/>
<f:setPropertyActionListener value="#{dto}" target="#{fctMainController.editSelectedDto}" />
<f:param name="skipvalidation" value="1" />
</p:commandLink>
 
<p:commandLink id="copyAbsence" title="#{dto.copyableMsg}" disabled="#{!dto.copyable}" oncomplete="saveScrollPos();PF('crudDialog').show()" update=":crudFormModal">
<h:graphicImage id="copyIcon" url="#{stylesheetManager.imageDir}copy.png" alt="#{dto.copyableMsg}" title="#{dto.copyableMsg}" style="border:none;"/>
<f:setPropertyActionListener value="#{dto}" target="#{fctMainController.copySelectedDto}"/>
<f:param name="skipvalidation" value="1" />
</p:commandLink>
 
<p:commandLink id="deleteAbsence" title="#{dto.deletableMsg}" disabled="#{!dto.deletable}" onclick="saveScrollPos();PF('deleteConfirmation').show()">
<h:graphicImage id="deleteIcon" url="#{stylesheetManager.imageDir}delete.png" alt="#{dto.deletableMsg}" title="#{dto.deletableMsg}" style="border:none;"/>
<f:setPropertyActionListener value="#{dto}" target="#{fctMainController.deleteSelectedDto}" />
</p:commandLink>
</p:column>
</p:dataTable>
so after page load:
one such div
after each subsequent update 1 or 2 more div. And so on.
When I open the columnToggler check/uncheck columns and perform an update on the dataTable having the columnToggler opened, I can't close the columnToggler anymore. It remains open forever. I think that this problem is correlated to the multiple <di> elements.
How can I solve this problem?
Thanks,
Luc
??