I've been running Primefaces 3.0, no issues, and now am trying an upgrade to 3.4.x - I've tried 3.4, 3.4.1, and 3.4.2 and this problem occurs in all 3 - basically for the datatable with the selectionMode="single" option when I click on a row it remains selected no matter how many other rows I select. At the same time I'm quite sure the selection="#{databrowser.selectedData}" variable is not being set when I'm clicking on the rows. The table is fully populated and no 2 rows have the exact same data in all columns. Tested and this occurs in both Chrome and Firefox. I can't find any similar problem posted - wondering if anyone else has had this issue?
Apart from the element referencing this is the 3.0 code I've used:
<p:layoutUnit position="center" resizable="true" header="Data Set Details" styleClass="east_panel_header" >
<h:form id="tblbrowser">
<p:dataTable id="dataTable" emptyMessage="No data sets found." style="width: 100%" var="datlis" resizableColumns="true" value="#{databrowser.selectedDataModel}" widgetVar="dataTable" selection="#{databrowser.selectedData}" selectionMode="single" >
<p:ajax event="rowSelect" update=":usercomments:commentsTable, :tblbrowser:dataTable" />
<f:facet name="header" >
<p:outputPanel>
<h:outputText value="Search all fields " />
<p:inputText id="globalFilter" onkeyup="dataTable.filter()"/>
</p:outputPanel>
</f:facet>
<p:column id="owner" filterBy="#{datlis.uname}" headerText="Added By" filterMatchMode="contains" >
<h:outputText value="#{datlis.uname}" />
</p:column>
<p:column id="name" filterBy="#{datlis.name}" headerText="Name" >
<h:outputText value="#{datlis.name}" />
</p:column>
<p:column id="description" filterBy="#{datlis.description}" headerText="Description" filterMatchMode="endsWith" >
<h:outputText value="#{datlis.description}" />
</p:column>
<p:column id="datatype" filterBy="#{datlis.data_type}" headerText="Data Type"
filterOptions="#{databrowser.dataTypeOptions}" filterMatchMode="exact" >
<h:outputText value="#{datlis.data_type}" />
</p:column>
<p:column id="quality" filterBy="#{datlis.quality}" headerText="Source Type"
filterOptions="#{databrowser.qualityOptions}" filterMatchMode="exact" >
<h:outputText value="#{datlis.quality}" />
</p:column>
<p:column id="added" headerText="Date Added" filterMatchMode="endsWith" >
<h:outputText value="#{datlis.added}" />
</p:column>
<p:column headerText="Metadata" style="width:40px" >
<p:commandButton id="selectButton" rendered="#{datlis.has_metadata}" icon="ui-icon-circle-arrow-s" title="View" ajax="false" >
<f:param name="filepath" value="#{datlis.filepath}" />
<p:fileDownload value="#{filedownloader.mfile}" />
</p:commandButton>
</p:column>
<p:column headerText="Data File(s)" style="width:90px" >
<p:commandButton id="selectButton2" rendered="#{datlis.has_datafiles}" icon="ui-icon-circle-arrow-s" title="View" ajax="false" >
<f:param name="datafiles" value="#{datlis.datafiles}" />
<p:fileDownload value="#{filedownloader2.dfile}" />
</p:commandButton>
<h:outputText value=" " />
<h:outputText value="#{datlis.zipsize}" />
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
You are missing the rowKey attribute which should be the unique identifier of each row.
Example, if your selectedData object has a unique field id, your dataTable component should look like:
<p:dataTable id="dataTable" rowKey=#{datlis.id}
value="#{databrowser.selectedDataModel}" var="datlis"
selection="#{databrowser.selectedData}" selectionMode="single" >
No need to update the same table within p:ajax to see the selection, so you can probably remove the :tblbrowser:dataTable from the update target and have only:
<p:ajax event="rowSelect" update=":usercomments:commentsTable" />
Related
Users just noticed a big bug in my datatable. When you use a datatable and a column toggler, unselecting a column just shift some rows, but it goes wrong when some cells are empty.
So i tried to refresh my data table with
`<p:columnToggler datasource="datalist" trigger="toggler">
<p:ajax event="toggle" update="datalist"/>
</p:columnToggler>`
but it goes wrong with :
`<p:columns value="#{consultationView.columns}" var="column" columnIndexVar="colIndex"
visible="#{column.property.matches('Z06|Z07|Z09')}" >`
Because if i unselected a visible column it makes it visible again...
here is the full datatable :
`
<f:facet name="header">
<p:commandButton process="listFDP" icon="ui-icon-file-pdf" value="Editer les fiches de paie" action="#{consultationView.printPaieAgent()}" escape="false" ajax="false" onclick="this.form.target='_blank'" />
<p:commandButton id="toggler" type="button" value="Colonnes"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler datasource="datalist" trigger="toggler">
<p:ajax event="toggle" update="datalist"/>
</p:columnToggler>
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center" exportable="false" toggleable="false" />
<p:column style="width:60px;text-align:left"
sortBy="#{row.gestion.datePaiement}" headerText="Pér. Paie" groupRow="true" sortOrder="ASCENDING" >
<h:outputText value="#{row.gestion.datePaiement}">
<f:converter binding="#{dateConverterMoisAnnee}" />
</h:outputText>
</p:column>
<p:column style="width:60px;text-align:left"
sortBy="#{row.gestion.dateOrigine}" headerText="Pér. Origine">
<h:outputText value="#{row.gestion.dateOrigine}">
<f:converter binding="#{dateConverterMoisAnnee}" />
</h:outputText>
</p:column>
<p:column headerText="N° cont." style="width:25px;text-align:center;white-space:pre-line;">
<h:outputText value="#{row.gestion.matricule.substring(10)}" />
</p:column>
<p:column headerText="Statut" style="width:150px;text-align:left;white-space:pre-line;" sortBy="#{row.statut}">
<h:outputText value="#{row.statut}" />
</p:column>
<p:columns value="#{consultationView.columns}" var="column" columnIndexVar="colIndex"
visible="#{column.property.matches('Z06|Z07|Z09')}" >
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{row.getRubValue(column.property)}" />
</p:columns>
</p:dataTable>`
Sorry Long post xs
I can not correctly view the contents of a column with selectManyCheckbox in p:dataTable.
Here my .xhtml:
<h:form id="projAccess" enctype="multipart/form-data">
<p:dataTable tableStyle="width:auto" id="i_dtb2" var="p" value="#{comBean.l_uSrcRes}" paginator="true" rows="5" rowsPerPageTemplate="5,10"
paginatorPosition="bottom">
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="User" />
<p:column rowspan="2" headerText="Asset" />
<p:column colspan="6" headerText="Roles" />
<p:column rowspan="2" colspan="2" headerText="Action" />
</p:row>
<p:row>
<p:column headerText="Project Manager"></p:column>
<p:column headerText="Project Manager Deputy"></p:column>
<p:column headerText="Business Analyst"></p:column>
<p:column headerText="Functional Analyst"></p:column>
<p:column headerText="Technical Analyst"></p:column>
<p:column headerText="Developer"></p:column>
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{p.usercd}" />
</p:column>
<p:column>
<h:outputText value="#{p.asset}" />
</p:column>
<p:column colspan="6">
<h:panelGroup layout="block" >
<p:selectManyCheckbox columns="6" value="#{p.rolesList}">
<f:selectItems value="#{comBean.l_roles}" var="role" itemLabel="#{role}" itemValue="#{role}" />
</p:selectManyCheckbox>
</h:panelGroup>
</p:column>
<p:column>
<p:commandButton action="#{comBean.m_updateAccess}" ajax="false" icon="ui-icon-pencil">
<f:setPropertyActionListener value="#{p}" target="#{comBean.f_selectedUser}" />
<f:param name="area" value="project" />
</p:commandButton>
</p:column>
<p:column>
<p:commandButton action="#{ubean.m_deleteUser}" ajax="false" icon="ui-icon-trash">
<f:setPropertyActionListener value="#{p}" target="#{comBean.f_selectedUser}" />
<f:param name="area" value="project" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
Here the result:
How can I adapt content to header columns?
You are using tableStyle="width:auto" in your p:dataTable.
Removing this will align the checkboxes to its respective columns but you can notice that the columns are still a little bit misaligned.
To solve this, you can add style="padding:0px;" on your checkbox p:column.
Your code will look something like this.
<p:dataTable id="i_dtb2" var="p" value="#{comBean.l_uSrcRes}" paginator="true" rows="5" rowsPerPageTemplate="5,10"
paginatorPosition="bottom">
// other codes
<p:column colspan="6" style="padding:0px;">
// other codes
</p:column>
// other codes
</p:dataTable>
On another note, if your functional specification allows it, you can remove [Project Manager, Project Manager Deputy, etc] headers, since your are displaying them right next to the checkboxes.
You will have to remove p:columnGroup and set the headerText to their respective columns with "Roles" as headerText for your checkBox column.
Hope this helps.
I'm nesting a datable in tabview. On the first page its all working correctly and i can edit the table, but after i switch the tabs, the datatable isnt editable anymore.
Is there something i'm doing wrong?
Using Primefaces 5.3
<h:form id="form">
<p:tabView id="tabs" value="#{studentsTableView.exams}" activeIndex="#{studentsTableView.activTab}" dynamic="true" var="exam" binding="#{tabView}" cache="false" >
<p:ajax event="tabChange" update="form:tabs" />
<p:tab id="tab" title="#{exam.name}">
<p:dataTable id="students" rowIndexVar="rowIndex" var="student" editable="true" widgetVar="gradetable" editMode="cell" tableStyle="width:auto" styleClass="myTable" value="#{studentsTableView.students}">
<p:ajax event="cellEdit" update="students" />
<p:column headerText="Nr">
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Vorname">
<h:outputText value="#{student.vorname}" />
</p:column>
<p:column headerText="Nachname">
<h:outputText value="#{student.nachname}" />
</p:column>
<p:column headerText="Matrikelnummer">
<h:outputText value="#{student.matrikelnummer}" />
</p:column>
<p:columns value="#{exam.allExams}" var="subexam" columnIndexVar="colIndex">
<f:facet name="header">
<h:outputText value="#{subexam.examName}" />
</f:facet>
<p:cellEditor>
<f:facet name="output"><h:outputText id="modeloutput" value="#{studentsTableView.getGrade(subexam, student)}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{studentsTableView.currentGrade}" valueChangeListener="#{studentsTableView.insertGrade(subexam, student)}" style="width:90%">
<p:ajax event="change" update="modelInput" />
<p:ajax event="change" update="modeloutput" />
<p:ajax event="change" update="modeloutput" />
<p:ajax event="change" update=":form:tabs:0:students" />
</p:inputText></f:facet>
</p:cellEditor>
</p:columns>
<p:column id="endgrades" headerText="Endnote">
<h:outputText id="endgrade" value="#{studentsTableView.getEndGrade(exam, student)}" />
</p:column>
<p:column headerText="Formel">
<p:selectBooleanButton id="value1" value="true" onLabel="Yes" offLabel="No" style="width:60px" />
</p:column>
<p:column headerText="Kommentar">
<p:commandButton id="public" icon="ui-icon-comment" type="button" >
<p:ajax event="click" listener="#{studentsTableView.setPublicCommentInfos(exam, student)}" update="publicarea" />
</p:commandButton>
<p:overlayPanel id="imagePanel" for="public" hideEffect="fade">
<h:inputTextarea id="publicarea" value="#{studentsTableView.publicComment}" >
<p:ajax event="change" update="publicarea" />
</h:inputTextarea>
</p:overlayPanel>
<p:commandButton id="private" icon="ui-icon-locked" type="button" >
<p:ajax event="click" listener="#{studentsTableView.setPrivateCommentInfos(exam, student)}" update="privatearea" />
</p:commandButton>
<p:overlayPanel id="privatepanel" for="private" hideEffect="fade">
<h:inputTextarea id="privatearea" value="#{studentsTableView.privateComment}" >
<p:ajax event="change" update="privatearea" />
</h:inputTextarea>
</p:overlayPanel>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
</h:form>
Your problem could be because you're still referencing the datatable id from the first tab, even though you switched to another. You could try to create a different id for each datatable from each tab and then working with those ids and updating them.
I need explanation for the below value binding in the outputText inside p:dialog .I dont clear with that and is there any other way.
In my sample :
I have tried ,if i select the single or many check box the value get binded but when I click root check box which used for selecting all the check boxes, its getting selected but the values not get stored in the back end.
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="checkboxDT"
update=":form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Selected Cars"
widgetVar="multiCarDialog"
modal="true"
showEffect="fade"
hideEffect="fade"
resizable="false"
width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}"
var="car">
<h:outputText value="#{car.id} - #{car.brand}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
You should update checkboxDT because update is used to determines id’s of components to be updated (refreshed with updated values from server). If you do not update checkboxDT, the selectedCars do not update too.
<p:commandButton process="checkboxDT"
update="checkboxDT,:form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
I have strange problem with following code:-
<p:dataTable id="dataTbl_mnuItmList_id" rows="5"
paginator="true" paginatorPosition="top"
value="#{addMenuItemMB.menuItemList}" var="menuItem"
style="width:100%; height:100%">
<p:column headerText="Item Name" sortBy="itemName">
<h:outputText value="#{menuItem.itemName}" />
</p:column>
<p:column headerText="Created Date" sortBy="createdDate">
<h:outputText value="#{menuItem.createdDate}">
</h:outputText>
</p:column>
<p:column headerText="Modified Date" sortBy="modifiedDate">
<h:outputText value="#{menuItem.modifiedDate}" />
</p:column>
<p:column>
<p:commandButton id="cmdBtn_edit"
onclick="widVar_menuItem.unselectAllRows()"
update=":frm_addMnuItm_dlg:outPutPnl_addMnuItmDlg_id"
oncomplete="PF('dlg_addMnuItem_widVar').show()"
icon="ui-icon-pencil" title="Edit" value="Edit">
<f:setPropertyActionListener value="#{menuItem}"
target="#{addMenuItemMB.menuItemToEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
Following is the dataTable having widgetVar="widVar_menuItem"
<p:dataTable id="dataTbl_menuItem_id" rows="5"
paginator="true" paginatorPosition="top"
widgetVar="widVar_menuItem" editable="true" editMode="cell"
value="#{addMenuItemMB.mnuItmSpecDtlListModel}"
var="mnuItmSpecDtl" rowKey="#{mnuItmSpecDtl.id}"
selection="#{addMenuItemMB.selectedLabels}">
<f:facet name="header">
<p:outputLabel value="Specification Label" />
</f:facet>
<p:column selectionMode="multiple"
style="width:2%; display:none;" />
<p:ajax event="toggleSelect"
listener="#{addMenuItemMB.onToggleSelect}" />
<p:ajax event="cellEdit"
listener="#{addMenuItemMB.onCellEdit}" />
<p:column headerText="Label" style="width:31%">
<h:outputText value="#{mnuItmSpecDtl.labelName}" />
</p:column>
<p:column headerText="Price" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{mnuItmSpecDtl.price}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{mnuItmSpecDtl.price}"
style="width:50px" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Above code Having command button in datatable column which has the property f:setPropertyActionListener it is working fine. But when I added onclick client event handler the page get submitted and when I remove onclick attribute from command button it is working fine as expected. So my question is what is wrong with above code, or What I realized (it may be wrong) client side event handler are not property working with f:setPropertyActionListener attribute.
Please suggest me proper solution.
Thanks.