Bug when editing date field in DataTable component - primefaces

I've got a weird bug when editing a date field using a Calendar component inside of an editable DataTable. To explain, I'm going to need to show you some pictures.
First, here is the actual page I'm working from:
Now, let's change date 1 in the list to the 13th of February and click OK.
As you can see, the table changes, but the row takes on another row's data.
Other than in the GUI, the update's gone just fine, and if we reload the page the date has been updated in the database. This is what the table looks like after the page has been refreshed:
I've turned the code inside and out trying to get at this bug, and I'm starting to wonder if it's a bug in PrimeFaces itself. I've stepped through the entire workflow and have concluded that the backing ArrayList has the correct values at all times. I was thinking it may have had something to do with me sorting the list both when fetching it from the database and using the sortBy attribute of the DataTable. After disabling both however, the bug continues to manifest itself.
Here's my code for the page. Can anyone see anything I've done wrong? If so, you're my hero =)
<ui:composition template="/WEB-INF/standard-page-template.xhtml">
<ui:define name="title">Change Dates</ui:define>
<ui:define name="content">
<p:panel header="Change dates" style="width:760px">
<h:form>
<p:panel>
Just the search stuff here...
</p:panel>
<p:panel header="Search">
<h:panelGrid columns="1">
<p:dataTable id="listDatesTable" value="#{view.dateWrappers}" var="wrapper"
rowIndexVar="index" editable="true"
emptyMessage="Search for an ID above">
<p:ajax event="rowEdit" listener="#{changePublishDateView.changeDate}"/>
<p:column headerText="Dragning" width="90">
<h:outputText value="#{wrapper.id}"/>
</p:column>
<p:column headerText="Beskrivning" width="180">
<h:outputText value="#{wrapper.description}"/>
</p:column>
<p:column headerText="Distribution" width="100">
<h:outputText value="#{wrapper.id2}"/>
</p:column>
<p:column headerText="Publiceringstid" width="170" styleClass="#{view.duplicateDateInRow(wrapper)}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{wrapper.newhDate}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:calendar
mindate="#{view.minDate}" stepMinute="30" minHour="8" maxHour="22"
pattern="yyyy-MM-dd HH:mm" value="#{wrapper.newDate}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="50">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:panel>
</h:form>
</p:panel>
</ui:define>

As it turns out, this bug was due to the data in the individual rows being mostly identical.
Solution: Set a rowKey attribute on the datatable, to the date field. Now it works fine with or without sorting.
http://www.developer.am/primefaces/?page=RowKey

Related

How to hide dividing lines in a p:datatable

I try to hide the row separators in a Sub-Datatable in my JSF-Application but it doesn't work. I'm also using Primefaces 6.0.
<p:column style="font-size:10pt;vertical-align:top;width:50%">
<f:facet name="header"></f:facet>
<p:dataTable cellspacing="0%" id="iconTable" value="#{bla.kek}" var="lol" style="width:104%;margin-right:0%;margin-left:-2%;margin-top:-0.75%;margin-bottom:-0.75%;border-top:none;border-bottom:none;">
<f:facet name="header" style=" display:none"></f:facet>
<p:column style="width:5%;text-align:center;border:0px;padding:0px;margin:0px" styleClass="borderless">
#{doesnt.matter}
</p:column>
<p:column style="width:95%;font-size:8pt;vertical-align:top;border:0px;padding:0px;margin:0px">
#{blablabla.blablabla}
</p:column>
</p:dataTable>
</p:column>
Sorry for those names but I think the table content doesn't affect the design in this case. Also sorry for the repetitive code. I hope you can help me find the solution :)

Primefaces - Dialog fields are empty but not all of them

my problem is really strange ( to me at least ).
I have a dialog written in Primefaces.
From the beginning I had the problem that the fields have not been shown, I had to mark them so that I could read the content.
Then I wrote a css styleclass: color black in order to have it shown. This really worked ( for IE and Chrome ). Afterwards, I had to enlarge the columns from 2 to 4 because the dialog became unreadable. Now, the same thing happens again, I cannot read all the fields, here is a screenshot. Maybe, someone knows what I am missing here? Thank you very much.
Here is the code:
<h:form id="form">
<p:dialog header="Transaction Detail" widgetVar="transactionDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="transactionDetail" style="text-align:left;">
<p:panelGrid columns="4" rendered="#{not empty transactionBacking.selectedTransaction}" columnClasses="label,value">
<h:outputText styleClass="outputText" value="Transaction Id" />
<h:outputText value="#{transactionBacking.selectedTransaction.tableTransactionId}"/>
<h:outputText styleClass="outputText" value="Customer - customerId" />
<h:outputText value="#{transactionBacking.selectedTransaction.customer.customerId}"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
I did a workaround. I wrote
style="color: black"
instead of
styleclass="outputText"
I think there are some problems with our CSSĀ“ but I have to investigate that much more.

How to change Primefaces Datatable filter position?

Right now by default PF Datatable showing filter position with header .Is it possible to show filter position on footer of the DataTable ?
I tried below code in Datatble Footer but not worked
<f:facet name="footer">
<p:column>
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
</p:column>
<p:column>
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
</p:column>
</f:facet>
No, not possible in this way. I see three options:
Use DOM manipulation to move the filters to the corresponding tags in the bottom. Do not forget to do this after each ajax call. And by hiding the filters in the header with css anyway, you prevent a 'jumpy' userinterface
Using OmniFaces' moveComponent showcase.omnifaces.org/components/moveComponent as proposed by #MathieuCastets
Change the source of the PrimeFaces dataTable and create your own component.

primefaces 4 datatable pager works only after first ajax update

i have an primefaces 4 datatable, when loading the page the paginator isn't working.. when i click the button nothing happens. But the first data is shown. Wehn i now sort/filter the table once the paginator starts to work.
<p:dataTable var="user" value="#{proxyUserListHandler.lazyModel}" paginator="true" rows="10" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="10,50,100,200,500" lazy="true">
<p:column headerText="Id" sortBy="id" filterBy="#{user.id}">
<h:outputText value="#{user.id}" />
</p:column>
<p:column headerText="Username" sortBy="username" filterBy="#{user.username}">
<h:outputText value="#{user.username}" />
</p:column>
<p:column headerText="apiKey" sortBy="apiKey" filterBy="#{user.apiKey}">
<h:outputText value="#{user.apiKey}" />
</p:column>
</p:dataTable>
the problem was
<p:dataTable value="#{listHandler.lazyModel}"
the function always returned a new LazyModel...somehow the function is called twice and only at the first object the "load" function was called.
You probably have another error on the page that you are not noticing (and quite likely is not being reported!)
Try to reduce the page functionality to the bare min in order to get the data table to react properly, then add the other page components back in until the datatable bahavior is impacted again.

Primefaces rowselect event doesnt work in ver 3.3

I have this code. It should fire rowSelect event, after the user select a row and close the dialog box. it worked fine before i updated to primfaces 3.3(I had ver3.2). I dont have any exception in console and when I debuged i see the method doesnt call. I dont know where to begin to solv this problem. Could someone help me with this?
<p:dialog id="dlg" closable="true" header="New reciever" widgetVar="receiverListDlg" visible="false" modal="true">
<p:dataTable var="reciever" value="#{transactionController.recieverList}">
<p:ajax event="rowSelect" listener="#{transactionController.onRowSelect}" update=":form" onsuccess="receiverListDlg.hide()" />
<f:facet name="header">
Previouse recievers for #{customer.firstName}
</f:facet>
<p:column selectionMode="single" />
<p:column headerText="#{msg.havale_customer_firstname}">
<h:outputText value="#{reciever.firstName}" />
</p:column>
<p:column headerText="#{msg.havale_customer_lastName}">
<h:outputText value="#{reciever.lastName}" />
</p:column>
<p:column headerText="#{msg.havale_customer_phoneNr}">
<h:outputText value="#{reciever.phoneNr}" />
</p:column>
</p:dataTable>
</p:dialog>
Now Primefaces provided some new ajax events:
onSelectCheckBox
onUnselectCheckbox
onSelectRadio
So rowSelect and rowUnselect will not be fired in your case.
I think you should use the "rowSelectRadio" ajax event.
The dataTable should be surrounded by <h:form>. Also you should add the following attributes to the p:dataTable (I don't know if all of them are required, but I have them all and it works fine).
- selectionMode="single"
- rowKey="#{receiver.id}" (replace 'id' with the actual ID attribute of Receiver)
- selection="#{transactionController.selectedReceiver"
I'm new to stackoverflow as user but I use it frequently as I saw that is something going on here with Prime! ;-)
Okay, I'm currently migrating a RichFaces 3.3.3 JSF 1.2 project to Mojarra 2.1.7 (SNAPSHOT 20120206) and PrimeFaces 3.3 which is IMHO revelation to JSF.
Long story short I was searching for this error mentioned in the topic for half the week and I gave it a try to step back to PF 3.2 and tataaaa rowSelect and all my other implementations work now.
I have a simple form with a datatable and selectionMode="multiple" and the ajax events:
<h:form>
<p:dataTable id="massnahmenAuswahl"
value="#{massnahmenController.massnahmen}"
var="eineMassnahme"
selection="#{massnahmenController.massnahmenSelected}"
rowKey="#{eineMassnahme.massnahme}">
<p:ajax event="rowSelect"
listener="#{massnahmenController.rowSelected}" process="#this"
update="#this" />
<p:ajax event="rowUnselect"
listener="#{massnahmenController.rowUnselected}" process="#this"
update="#this" />
<p:ajax event="toggleSelect"
listener="#{massnahmenController.rowToggleSelected}" process="#this"
update="#this" />
<p:column selectionMode="multiple" style="width:18px"
disabledSelection="#{!login.editable}" styleClass="checkbox" />
<p:column>
<h:outputText escape="false" value="#{eineMassnahme.zeile}" />
</p:column>
<p:column>
<h:outputText escape="false" value="#{eineMassnahme.bezeichnung}" />
</p:column>
<p:column>
<fiona:labelImgGA for="#{eineMassnahme.massnahme}" />
</p:column>
<p:column>
<p:selectBooleanCheckbox value="#{eineMassnahme.vorjahr}"
disabled="true" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Speichern"
action="#{massnahmenController.speichern}"
disabled="#{!login.editable}" process="#this" update="#form" />
<p:spacer/>
<p:commandButton value="Weiter"
action="#{massnahmenController.saveAndNext}"
disabled="#{!login.editable}" process="#this" update="#form" />
</f:facet>
</p:dataTable>
</h:form>
Will this be fixed in near future?
Until now I really go with PF!
Don't disappoint me! ;-)
UPDATE:
The solution is to use lazy=true since PF 3.3. I've seen it in issue 2993 in PrimeFaces issue tracker!