primefaces dialog box and datatable checkbox selection - jsf-2

I want to display the selected rows of a table in a dialog box but I have an empty dialog box even if I check one or more line nothing is displayed .. I realy don't know what is the cause of my problem .. I hope there will be someone who can help me (I m a beginner in jsf2 and I just discovered primefaces I really want help thanks soo much in advance ) this is my jsf :
<p:outputLabel for="product" value="" />
<p:dataTable id="product" var="ligne" value="#{productBean.myProducts}" selection="#{productBean.selectedProducts}" style="margin-bottom:0" rowKey="#{productBean.id}">
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="Code">
<h:outputText value="#{ligne.code}" />
</p:column>
<p:column headerText="designation" >
<h:outputText value="#{ligne.title}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="product" update=":form:multiProductDetail" icon="ui-icon-search" value="View" oncomplete="PF('multiProductDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Products" widgetVar="multiProductDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
<p:outputPanel id="multiProductDetail" style="text-align:center;">
<ui:repeat value="#{prodBean.selectedProducts}" var="ligne">
<h:outputText value="#{ligne.code} -- #{ligne.title}" style="display:block"/>
</ui:repeat>
</p:outputPanel>

Did you put a
h:form
inside this page
Is there data inside selection="#{productBean.selectedProducts}" .Can you a debug point there and see or put some sysouts in the getters and setters of selectedProducts.
Can you share your product code and check if selectedProducts is null or not
system.out.println("products"+selectedProducts.get(0))
best
vj

Related

Datatable cellEditor functionality in forEach generated Datatable

I am trying to generate a editable datatable dynamically dependend on the resultset of an previously executed SQL-Query.
Depending on which columns would have a constant value I am trying to not render them. That part of the code works just fine, everything is displayed as i would like it to be.
My issues are with the cellEditor. I generate my datable as follows:
<p:dataTable ajax="true" var="mBT" value="#{stammdaten.bbvList}" id="meldeBearbeitungsTable" editable="true" editMode="cell" scrollable="true" scrollHeight="400" style="width:600px">
<p:ajax event="cellEdit" listener="#{stammdaten.onCellEdit}" update=":Mb:message"/>
<c:forEach var="column" items="#{stammdaten.columns}">
<p:column headerText="#{column.header}">
<f:attribute name="myCol" value="#{column}" />
<span>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{mBT[column.property]}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{mBT[column.property]}">
<p:keyFilter regEx="/[0-9]/i"/>
</p:inputText>
</f:facet>
</p:cellEditor>
</span>
</p:column>
</c:forEach>
</p:dataTable>
bbvList is a List of beans with different values.
columns is a List of beans to identify the header-Texts coresponding to the respective variables.
So now the issue itself:
This is how the cellEditor looks like when i click on it:
Issue-Picture
So in that example i tried to edit the field with the value "8" in it. onCellEdit gets triggered (a System.out.println is getting printed on the console) but i cant actually change the value in the respective field.
Does have cellEdit issues with the forEach initialisition of the dataTable? If yes is there a way to fix it? Else what am i doing wrong?
Since only a specific component of the html-side of code isnt working as it should be i won't post unnecessary java-Code for now. If needed i will add that as well.
Hope someone can help :)
Turns out the attribute and/or span where the cause of the problem. Simply removing them solved the issue with the cellEdit.
following works fine :
<p:dataTable ajax="true" var="mBT" value="#{stammdaten.bbvList}" id="meldeBearbeitungsTable" editable="true" editMode="cell" scrollable="true" scrollHeight="400" style="width:600px">
<p:ajax event="cellEdit" listener="#{stammdaten.onCellEdit}" update=":Mb:message"/>
<c:forEach var="column" items="#{stammdaten.columns}">
<p:column headerText="#{column.header}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{mBT[column.property]}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{mBT[column.property]}">
<p:keyFilter regEx="/[0-9]/i"/>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
</c:forEach>
</p:dataTable>

Command Link with in a datatable not working

I am having a problem with primefaces command link.
I have two <h:form> which are not nested the link from the second <h:form> is not triggered.
<h:form>
<p:dataTable>
<p:column>
</p:column>
<p:column>
<p:commandLink onclick="dialog.show()"/>
</p:column>
</dataTable>
</h:form>
<p:dialogBox widgetWar="dialog">
<h:form>
<p:dataList value="#{bean.List}" var="var">
<p:commandLink value="#{var.name}" actionListener="#{bean.viewName(var.id)}"/>
</dataList>
</h:form>
</p:dialogBox>
The command Link from the dialog box is not working and there are no exceptions thrown.
Can any one help?
Your command Link shoud be inside <p:column>.
<p:dataList value="#{bean.List}" var="var">
<p:column>
<p:commandLink value="#{var.name}" actionListener="#{bean.viewName(var.id)}"/>
</p:column>
</p:dataList>
This is necessary in order tou have data Selection inside dataList. Related problem is here

Left Layout disappears whenever datatable is added within the center Pane of primeFaces Layout

Im using Jsf 2.0 and primefaces exstensions component pe:layout to create a page with left navigation menu bar ,bottom footer and center pane for content everthing works fine but when ever i add primefaces datatable (p:datatable) in the center pane the header and footer layouts are preserved but the left pane disappears and the center pane occupies the entire page. I tried setting width and height of the datatable but nothing seems to work. The page displays correctly without datatable. Any help would be greatly appreciated.
Please find below the code with datatable:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/templates/showcaseLayout.xhtml">
<ui:define name="centerContent">
<f:facet name="header">
<h:outputText value="Jan Sampark"/>
</f:facet>
<h:panelGroup layout="block" styleClass="centerContent">
Welcome to the Menu Page.
<p:growl id="messages" showDetail="true"/>
</h:panelGroup>
<p:tabView id="tabView">
<p:tab id="tab1" title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage id="tab1Img" value="/images/godfather/godfather1.jpg" />
<h:outputText id="tab1Text"
value="The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. T
hrough Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family." />
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage id="tab2Img" value="/images/godfather/godfather2.jpg" />
<h:outputText id="tab2Text" value="Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfather's depiction of the dark side of the American dream.
In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows."/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage id="tab3Img" value="/images/godfather/godfather3.jpg" />
<h:outputText id="tab3Text" value="After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this third and final story of the fictional Corleone crime family.
Two decades have passed, and crime kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate."/>
</h:panelGrid>
</p:tab>
</p:tabView>
<h:panelGroup layout="block" styleClass="centerContent">
<p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true" style="table-layout: fixed"
scrollable="true" scrollHeight="250" scrollWidth="300">
<f:facet name="header">
In-Cell Editing
</f:facet>
<!-- <p:ajax event="rowEdit" listener="#{tableBean.onEdit}" update=":form:messages" /> -->
<!-- <p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" /> -->
<p:column headerText="Model" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.model}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Manufacturer">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.manufacturer}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.manufacturer}" >
<f:selectItems value="#{tableBean.manufacturers}"
var="man"
itemLabel="#{man}"
itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.color}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.color}" >
<f:selectItems value="#{tableBean.colors}"
var="color"
itemLabel="#{color}"
itemValue="#{color}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Options">
<p:rowEditor />
</p:column>
</p:dataTable>
</h:panelGroup>
</ui:define>
<ui:define name="docuTable">
<ui:include src="/sections/shared/documentation.xhtml">
<ui:param name="tagName" value="timeline"/>
</ui:include>
</ui:define>
</ui:composition>
</html>

p:dataTable not updating after deleting row

I have searched this topic and tried all the suggestions, however I just cannot seem to get what seems to be a very simple thing to work.
I have a PrimeFaces 3.4 <p:dataTable> with data populated from a List in my backing bean and with a <p:commandLink> in one of the columns for every row. I am just trying to implement a simple delete and refresh of the data table. However although the element is removed from the List object, the data table does not refresh.
Bean (view scoped):
public void deleteRow(rowType row){
this.tableDataList.remove(row);
}
View:
<h:form id="form">
<p:dataTable id="dt" var="dt" value=#{managedBean.tableDataList}
rowKey="#{dt.id}" selection="#{managedBean.selectedRow}"
selectionMode="single">
<p:column><h:outputText value="#{dt.field1}"/></p:column>
<p:column><h:outputText value="#{dt.field2}"/></p:column>
<p:column><h:outputText value="#{dt.field3}"/></p:column>
<p:column width="60">
<p:commandLink id="deleteCl"
value="Delete"
actionListener="#{managedBean.deleteRow(dt)}"
update=":form:dt"
/>
</p:column>
</h:form>
From what I can see, a data table in PrimeFaces 3.4 should be able to be updated via a child component such as a command link, but I just can't get it to work. I have a phase listener implemented so I can see that there are no validation or other errors before the render response phase, but the data table continues to display the deleted row unless I refresh the browser window, then it will disappear.
It works if I set ajax="false" in the command link, but then the entire page is updated unnecessarily.
I have tried:
Changing between action and actionListener
Making the following changes in various combinations to the command link attributes:
process="#this"
update="#this"
update="#form"
The annoying thing is that I have a similar table with a command link where each link opens up a dialog window containing another data table that is populated with data retrieved based upon the row that was initially clicked. Works perfectly on the same page. Agh!
Try modeling some points from this to see if it helps you.
<h:outputText escape="false" value="#{message.noCompaniesFound}" rendered="#{companyController.companyModel.rowCount == 0}"/>
<h:panelGroup rendered="#{companyController.companyModel.rowCount > 0}">
<p:commandButton id="addButton" value="#{message.newCompany}" oncomplete="companyDialog.show()" icon="ui-icon-plus" title="#{message.addCompany}" rendered="#{loginController.privileges.contains(bundle.SuperUser)}"/>
<p:dataTable id="companyList" var="company" widgetVar="companyTable" value="#{companyController.companyModel}" rowKey="#{company.name}" selection="#{companyController.selectedCompany}" selectionMode="single"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,20,50,100">
<p:ajax event="rowEdit" update="#this" listener="#{companyController.saveCompany(company)}">
<f:param name="company" value="#{company}"/>
</p:ajax>
<f:facet name="header">
<p:outputPanel>
<h:outputText value="#{message.search}: "/>
<p:inputText id="globalFilter" onkeyup="companyTable.filter()"/>
</p:outputPanel>
</f:facet>
<p:column id="name" headerText="#{message.name}" filterBy="#{company.name}" filterMatchMode="contains" filterStyle="display: none;">
<h:outputText value="#{company.name}"/>
</p:column>
<p:column headerText="#{message.editOptions}" style="width:10px;">
<p:commandButton id="editButton" update=":companyForm" oncomplete="editDialog.show()" icon="ui-icon-pencil" title="#{message.edit}">
<f:setPropertyActionListener value="#{company}" target="#{companyController.selectedCompany}"/>
</p:commandButton>
<p:commandButton id="deleteButton" update=":companyForm" oncomplete="confirmation.show()" icon="ui-icon-trash" title="#{message.delete}">
<f:setPropertyActionListener value="#{company}" target="#{companyController.selectedCompany}"/>
</p:commandButton>
</p:column>
<f:facet name="footer">
</f:facet>
</p:dataTable>
</h:panelGroup>
<p:confirmDialog id="confirmDialog" message="#{message.sureYouWantToDelete} #{companyController.selectedCompany.name} ?" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="#{message.yes}" onclick="confirmation.hide()" actionListener="#{companyController.deleteCompany}" update="companyForm" />
<p:commandButton id="decline" value="#{message.no}" onclick="confirmation.hide()"/>
</p:confirmDialog>

ui:repeat JSF 2.0 cannot render iterate p:row primefaces

I got a problem here, my system config was Mojarra 2.1.7, Primefaces 3.2 and using Glassfish 3.1+.
before this, i got my code well rendered using this codes:
<p:tabView>
<p:tab title="Offices Access" >
<h:outputText value="Access | Offices Name | Offices Code | Parent Offices" style="font-weight: bold;"/>
<ui:repeat value="#{userBean.officeses}" var="office">
<h:panelGrid columns="2">
<p:selectBooleanCheckbox id="access#{office.officesID}" style="width: 50px;"/>
<h:outputLabel for="access#{office.officesID}" value="#{office.officesName} | #{office.officesCode} | #{office.parentOffices}"/>
</h:panelGrid>
</ui:repeat>
</p:tab>
</p:tabView>
and i find this is generate rather ugly interfaces, so i ran over p:panelGrid from primefaces.
after i write some code and from my expectation it would work, but it DONT :(
this code render the header perfectly, but right after the ui:repeat code, it wouldnt render the p:row and the p:column inside it.
here is the code :
<p:tabView>
<p:tab title="Offices Access" >
<p:panelGrid styleClass="centerContent">
<f:facet name="header">
<p:row>
<p:column style="font-weight: bold;">Access</p:column>
<p:column style="font-weight: bold;">Offices Name</p:column>
<p:column style="font-weight: bold;">Offices Code</p:column>
<p:column style="font-weight: bold;">Above Level Offices</p:column>
</p:row>
</f:facet>
<ui:repeat value="#{userBean.officeses}" var="office">
<p:row id="rowforOffice#{office.officesID}">
<p:column><p:selectBooleanCheckbox id="access#{office.officesID}"/></p:column>
<p:column><h:outputText value="#{office.officesName}"/></p:column>
<p:column><h:outputText value="#{office.officesCode}"/></p:column>
<p:column><h:outputText value="#{office.parentOffices}"/></p:column>
</p:row>
</ui:repeat>
</p:panelGrid>
</p:tab>
</p:tabView>
am i miss something..?
or it is was a bug..? because i ran over google looking for this kind of code and i found nothing.
Regards,
bLueZ
As to the concrete problem, the <ui:repeat> is a view render time tag. Thus, it's physically present in the JSF component tree and generates its HTML output as many times as it needs to iterate over the value.
However, the <p:panelGrid> expects physically multiple <p:row> or <p:column> children, not a single <ui:repeat> with therein a single <p:row>. In other words, they needs to be prepared during the view build time instead of the view render time.
The JSTL <c:forEach> is a view build time tag. It will generate physically multiple <p:row> components into the JSF component tree and hence the <p:panelGrid> will find solely <p:row> children.
<p:panelGrid styleClass="centerContent">
<c:forEach items="#{userBean.officeses}" var="office">
<p:row id="rowforOffice#{office.officesID}">
<p:column><p:selectBooleanCheckbox id="access#{office.officesID}"/></p:column>
<p:column><h:outputText value="#{office.officesName}"/></p:column>
<p:column><h:outputText value="#{office.officesCode}"/></p:column>
<p:column><h:outputText value="#{office.parentOffices}"/></p:column>
</p:row>
</c:forEach>
</p:panelGrid>
Note: this breaks view scoped beans in Mojarra versions older than 2.1.18. If you can't upgrade, then consider a <p:dataTable> instead, as you already found out yourself.
See also:
JSTL in JSF2 Facelets... makes sense?
Thanks to #Jedrus07 to suggest me to post an answer.
Actually, what i did, was using <p:dataTable/> to make a good display of data.
example :
<p:tabView id="tabCustomerView">
<p:tab title="Fasilitas Nasabah">
<p:fieldset legend="Detil Fasilitas">
<p:dataTable value="#{custViewBean.customerSavingAccounts}"
var="customerSavingAccount"
rowIndexVar="customerSavingAccountRowIndex"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rows="10"
rowsPerPageTemplate="5,10,15"
paginatorPosition="top">
<f:facet name="header">
<h:outputText value="Daftar Rekening / Fasilitas Nasabah"/>
</f:facet>
<p:column headerText="#">
<h:outputText value="#{customerSavingAccountRowIndex + 1}"/>
</p:column>
<p:column headerText="Fasilitas Nasabah">
<h:outputText value="#{of:capitalize(customerSavingAccount.customerFacility)}"/>
</p:column>
<p:column headerText="Saldo Akhir">
<h:outputText value="#{customerSavingAccount.lastBalance}">
<f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
</h:outputText>
</p:column>
<p:column headerText="Tanggal Akhir">
<h:outputText value="#{customerSavingAccount.lastTransactiondate}">
<f:convertDateTime pattern="#{appBean.appSetting.siteFormatdate}"/>
</h:outputText>
</p:column>
<p:column headerText="Suku Bunga">
<h:outputText value="#{customerSavingAccount.interest} %"/>
</p:column>
<p:column headerText="Kolektibilitas">
<h:outputText value="#{customerSavingAccount.collectibility}"/>
</p:column>
<p:column headerText="Account Officer">
<h:outputText value="#{of:capitalize(customerSavingAccount.accountOfficer)}"/>
</p:column>
<p:column headerText="Jumlah Tunggakan">
<h:outputText value="#{customerSavingAccount.arrearsAmount}">
<f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
</h:outputText>
</p:column>
<p:column headerText="Jumlah Pembayaran">
<h:outputText value="#{customerSavingAccount.totalPayment}">
<f:convertNumber type="currency" currencySymbol="#{appBean.appSetting.curDefault.currencySymbol}"/>
</h:outputText>
</p:column>
<p:column headerText="Periode Pembayaran">
<h:outputText value="#{customerSavingAccount.termLimit} #{customerSavingAccount.termLimitDesc}"/>
</p:column>
<p:column headerText="Status">
<h:outputText value="#{customerSavingAccount.status}"/>
</p:column>
</p:dataTable>
</p:fieldset>
</p:tab>
</p:tabView>
So, use datatable for nicer looks to display your datas :)
Have fun.

Resources