Sort Titles are out of order

UI Components for JSF
Post Reply
slong
Posts: 18
Joined: 09 Feb 2016, 01:05

23 Jun 2021, 19:17

I have a page where I use the 'sort by' attribute. However, on mobile display, once the reflow option kicks in and the sort button appears instead of the arrows on the columns, the column titles that display in the dropdown list do not map correctly.

For example, the data table displays the following columns in this order on the page: RR, RN, Date, Station, Shop, Code.... (and so on). On the drop down however, you will see the columns listed out of order, like RR, Shop, Code, RN, Date, Station....(and so on) which as you can see does NOT match the order of the columns on the datatable. However, If you select, for example, the third item in the list (i.e. Code Ascending or Code Descending using our above example) it will sort the third column in the datatable which is 'Date' not Code as listed. So it is as if, the titles in the list are randomly ordered in name, but map to the correct column number. Here is the .xhtml that contains my datatable. What is causing this?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<!-- Copyright, 2017 Microvision Technology Corporation -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation. -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation, All Rights Reserved -->

<body>
<ui:composition>
<div class="card" id="tables">
<p:dataTable id="dataTable"
var="datarow"
rowKey="datarowkey"
value="#{mainController.mdata}"
reflow="true"
rows="500"
paginator="#{mainController.exceedsMaxRows}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="Returned {totalRecords} rows"
rowsPerPageTemplate="50,100,200,300,400,500"
emptyMessage="0 Records Returned "
lazy="true"
binding ="#{mainController.dataTable}"
resizeMode="fit"
stripedRows="true">

<f:facet name="header">
<p:panelGrid columns="1">
<p:commandButton id="toggler2" type="button" value="Hide Columns..." style="float: right;"
icon="ui-icon-calculator" />
</p:panelGrid>
<p:columnToggler trigger="toggler2" datasource="dataTable">
<p:ajax event="toggle" listener="#{mainController.onToggle}"/>
</p:columnToggler>
</f:facet>
<p:column headerText="" visible="#{mainController.fieldList[0]}" exportable="false"
toggleable="false" >
<h:commandLink action="#{mainController.famButtonPressed(datarow)}"
value="FAM"
styleClass="myButton"

onclick="window.open('#{commonController.famLink}?faultCode=#{datarow.code}&amp;rn=#{datarow.rn}&amp;rr=#{datarow.rr}')">

<!--this line stops page from jumping to top when fam button is pressed -->
<f:ajax execute="@form" render="@form"/>
</h:commandLink>
</p:column>
<p:column headerText="" visible="#{mainController.fieldList[1]}" exportable="false"
toggleable="false" >

<p:commandButton update="@form" oncomplete="PF('ifaultdlg').show()"
value=""
icon="pi pi-info"
styleClass="myButton">
<f:setPropertyActionListener value="#{datarow}" target="#{mainController.faultrri}" />
</p:commandButton>

</p:column>
<p:column headerText="" visible="#{mainController.fieldList[2]}" exportable="false"
toggleable="false" >
<h:outputLink id="googmap" value="http://maps.google.com/maps?f=q&amp;hl= ... r&amp;om=0"
rendered="#{(datarow.latitude_d ne null and datarow.longitude_d ne '' )}"
styleClass="myButton"
target="_Blank">Map
</h:outputLink>
</p:column>
<p:column headerText="RR" sortBy="#{datarow.rr}" visible="#{mainController.fieldList[3]}" exportable="#{mainController.fieldList[3]}">
<h:outputText value="#{datarow.rr}"></h:outputText>
</p:column>
<p:column headerText="RN" sortBy="#{datarow.rn}" visible="#{mainController.fieldList[4]}" exportable="#{mainController.fieldList[4]}">
<h:outputText value="#{datarow.rn}"></h:outputText>
</p:column>
<p:column headerText="Date (EST)" sortBy="#{datarow.estdate}"
width="7%" visible="#{mainController.fieldList[5]}" exportable="false">
<h:outputText value="#{datarow.estdate}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>
<p:column headerText="In Shop" sortBy="#{datarow.inshop}" visible="#{mainController.fieldList[7]}" exportable="#{mainController.fieldList[7]}">
<h:outputText value="#{datarow.inshop}"></h:outputText>
</p:column>
<p:column headerText="In Shop Name" sortBy="#{datarow.inshopname}" visible="#{mainController.fieldList[8]}" exportable="#{mainController.fieldList[8]}">
<h:outputText value="#{datarow.inshopname}"></h:outputText>
</p:column>
<p:column headerText="Code" sortBy="#{datarow.code}" visible="#{mainController.fieldList[9]}" exportable="#{mainController.fieldList[9]}">
<h:outputText value="#{datarow.code}"></h:outputText>
</p:column>
<p:column headerText="Description" width="20%" sortBy="#{datarow.description}" visible="#{mainController.fieldList[10]}" exportable="#{mainController.fieldList[10]}">
<h:outputText value="#{datarow.description}"></h:outputText>
</p:column>
<p:column headerText="Status" sortBy="#{datarow.status}" visible="#{mainController.fieldList[11]}" exportable="#{mainController.fieldList[11]}">
<h:outputText value="#{datarow.status}"></h:outputText>
</p:column>
<p:column headerText="Count" sortBy="#{datarow.count}" visible="#{mainController.fieldList[12]}" exportable="#{mainController.fieldList[12]}">
<h:outputText value="#{datarow.count}"></h:outputText>
</p:column>
<p:column headerText="Version" sortBy="#{datarow.version}" visible="#{mainController.fieldList[13]}" exportable="#{mainController.fieldList[13]}">
<h:outputText value="#{datarow.version}"></h:outputText>
</p:column>
<p:column headerText="Shop" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[14]}" exportable="#{mainController.fieldList[14]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column headerText="User" sortBy="#{datarow.username}" visible="#{mainController.fieldList[15]}"
exportable="false">
<h:outputText value="#{datarow.username_html}" escape="false"/>
</p:column>
<p:column headerText="Laptop" sortBy="#{datarow.laptopserial}" visible="#{mainController.fieldList[16]}" exportable="#{mainController.fieldList[16]}">
<h:outputText value="#{datarow.laptopserial}"></h:outputText>
</p:column>
<p:column headerText="Occur GMT" sortBy="#{datarow.occur_gmt}" visible="#{mainController.fieldList[17]}" exportable="false">
<h:outputText value="#{datarow.occur_gmt}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>

<p:column headerText="Reset GMT" sortBy="#{datarow.reset_gmt}" visible="#{mainController.fieldList[18]}" exportable="false">
<h:outputText value="#{datarow.reset_gmt}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>

<p:column headerText="Loco DL GMT" sortBy="#{datarow.loco_dl_gmt}" visible="#{mainController.fieldList[19]}" exportable="false">
<h:outputText value="#{datarow.loco_dl_gmt}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>

<p:column headerText="Fault GMT" sortBy="#{datarow.faultdate_gmt}" visible="#{mainController.fieldList[20]}" exportable="false">
<h:outputText value="#{datarow.faultdate_gmt}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>

<p:column headerText="Longitude" sortBy="#{datarow.longitude_d}" visible="#{mainController.fieldList[21]}" exportable="#{mainController.fieldList[21]}">
<h:outputText value="#{datarow.longitude_d}"></h:outputText>
</p:column>
<p:column headerText="Latitude" sortBy="#{datarow.latitude_d}" visible="#{mainController.fieldList[22]}" exportable="#{mainController.fieldList[22]}">
<h:outputText value="#{datarow.latitude_d}"></h:outputText>
</p:column>

<p:column exportable="false" toggleable="false" >
<p:commandButton id="zoomdps" update="@form, @form:growl" oncomplete="PF('datapacksdlg').show()" icon="ui-icon-extlink">
<f:setPropertyActionListener value="#{datarow}" target="#{mainController.selectedfault}" />
</p:commandButton>
<p:tooltip id="zoomtip" for="zoomdps" value="View additional details including data packs"
showEvent="mouseover" hideEvent="mouseout"> </p:tooltip>
</p:column>
</p:dataTable>

</div>>
<!-- FAULT INFO DIALOG START -->
<p:dialog header="Fault Information" widgetVar="ifaultdlg" maximizable="false" closeOnEscape="true" style="max-height: 100%;max-width: 80%; overflow: auto" modal="true" position="Center, Center"
onShow="PF('ifaultdlg').initPosition()">
<p:commandButton id="dlgprintbtn" value="Print Detail..." type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px;">
<p:printer target="dlgprintarea" />
</p:commandButton>
<p:tooltip id="dlgprint" for="dlgprintbtn" value="This will print the Detail"
showEvent="mouseover" hideEvent="mouseout"> </p:tooltip>
<p:panel id="dlgprintarea" header="Fault">
<ui:insert name="pgifault">
<ui:include src="dlgFaultInfo.xhtml" />
</ui:insert>
</p:panel>
<br/>
<p:commandButton value = "Close" oncomplete="PF('ifaultdlg').hide()"/>
<br/><br/>
<span class="floatRight footerText"><h:outputText value=" #{commonController.reportName} Report - Version #{commonController.reportVersion} "/></span>
</p:dialog>
<!--FAULT INFO DIALOG END -->

<!--DATA PACK DIALOG START -->
<p:dialog header="Additional Detail" widgetVar="datapacksdlg" maximizable="false" closeOnEscape="true" style="max-height: 100%;overflow: auto" modal="true" position="Center, Center"
onShow="PF('datapacksdlg').initPosition()">
<p:commandButton id="dlgprintbtn2" value="Print Detail..." type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px">
<p:printer target="dlgprintarea2" />
</p:commandButton>
<p:tooltip id="datapacktip" for="dlgprintbtn2" value="For optimal output, set printer orientation to 'Landscape'"
showEvent="mouseover" hideEvent="mouseout"> </p:tooltip>
<p:panel id="dlgprintarea2">
<p:accordionPanel multiple="true" activeIndex="0,1">
<p:tab title="Report Data">
<p:panel id="dlgOther">
<ui:insert name="pgOther">
<ui:include src="dlgOther.xhtml" />
</ui:insert>
</p:panel>
</p:tab>
<br/>
<p:tab title="Data Signals" closable="false">
<p:panel id="dlgDP" >
<div id="pgdatapacks">
<ui:insert name="content" >
<ui:include src="dlgDatapacks.xhtml" />
</ui:insert>
</div>
</p:panel>
</p:tab>
</p:accordionPanel>
</p:panel>
<p:commandButton value = "Close" oncomplete="PF('datapacksdlg').hide()"/>
</p:dialog>

</ui:composition>
</body>
</html>
Top
slong
Posts: 18
Joined: 09 Feb 2016, 01:05

23 Jun 2021, 20:42

You don't need to look at my example. This happens in Primefaces Showcase CRUD table as well!
Top
Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

23 Jun 2021, 22:04

Definitely looks broken.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
Top
slong
Posts: 18
Joined: 09 Feb 2016, 01:05

24 Jun 2021, 22:55

So...what happens now? I am working on an application for a client. Is this something that you will be fixing anytime in the near future?
Top
Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

25 Jun 2021, 13:12

Not sure if would be fixed anytime soon but you can report it on the GitHub Issues page.

https://github.com/primefaces/primefaces/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 13 guests