6.2 columnToggler on Liferay 7

[william_gosse]

I'm having an issue with the Primefaces 6.2 columnToggler on Liferay 7. I created a portlet with a dataTable that has a columnToggler on it. The toggler seems to be working fine but if I go to another page the toggler dropdown is being rendered in the upper left corner of my portal.

Code: Select all

		<h:form id="loanForm"
			onkeypress="if (event.keyCode == 13) { return false; }">
			<p:dataTable id="loansTable" var="loan" reflow="true"
				value="#{loanView.loans}" widgetVar="loansTableWidgetVar"
				emptyMessage="No records found with given criteria" 
				filteredValue="#{loanView.filteredLoans}"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				paginator="true" rows="50" rowsPerPageTemplate="50,100,150,200"
				sortMode="multiple" rowKey="#{loan.id}" rowIndexVar="rowIndex">

				<f:facet name="header">
					<p:toolbar style="border: none; padding: 0; background: none;">
						<f:facet name="left">
							<p:commandButton id="addLoanButton" style="padding-top: 2px;"
								onclick="PF('addloanDialogVar').show();" value="Add"
								icon="ui-icon-plus" title="Add a new loan.">
							</p:commandButton>
							<p:spacer width="20"></p:spacer>
							<h:outputText value="Export " />
							<h:commandLink>
								<p:graphicImage name="/images/excel.png" title="Export to Excel" />
								<p:dataExporter type="xls" target="loansTable" fileName="loans"
									pageOnly="false" />
							</h:commandLink>

							<h:commandLink>
								<p:graphicImage name="/images/csv.png" title="Export to CSV" />
								<p:dataExporter type="csv" target="loansTable" fileName="loans"
									pageOnly="false" />
							</h:commandLink>
						</f:facet>

						<f:facet name="right">
							<p:inputText id="globalFilter"
								onkeyup="PF('loansTableWidgetVar').filter()"
								style="vertical-align: middle;" placeholder="Search..." />
							<p:spacer width="5"></p:spacer>
							<p:commandButton id="clearButton" style="padding-top: 2px;"
								value="Reload" title="Clear search filters and reload page."
								icon="ui-icon-refresh" actionListener="#{loanView.loadAllLoans}"
								update="@form"
								oncomplete="PF('loansTableWidgetVar').clearFilters(); location.reload();">
							</p:commandButton>
							<p:spacer width="20"></p:spacer>
							<p:commandButton id="loanTableTogglerButton" type="button" value="Columns"
								style="float:right" icon="ui-icon-calculator">
							</p:commandButton>
							<p:columnToggler id="loanTableToggler" datasource="loansTable" trigger="loanTableTogglerButton" rendered="#{!empty loanView.loans}" />
						</f:facet>
					</p:toolbar>
				</f:facet>

Unfortunately it like I can't attach a screenshot to this post but they can be view on a post I made to the Liferay forum:
https://web.liferay.com/community/forum ... /104369780

So I did get a css workaround for this from the Kyle at Liferay (see Liferay post above for more details). Here's the styling I had the add to my portlet to fix this issue:
<h:head>
<style id="hideColumnTogglerLeftoverMarkupWorkaroundCSS"
data-senna-track="permanent">
.ui-columntoggler.ui-widget {
display: none;
}
</style>
</h:head>
<h:body>

So one other thing I noticed with the toggler is that it broke the two popup calendar filters that I had for two date columns I had in my datatable. I know it has nothing to do with the css fix I got yesterday. I can live without these popups but it be nice to know what's going on.

[william_gosse]

I got date filtering working again with the toggler. Apparently the state of the column toggles needs to be preserved in the managed bean or else sorting and filtering all go to hell. See this for details: https://www.primefaces.org/stateful-column-toggler/