passing value from data table to dialog - primefaces

I have a problem with passing data from dataTable witch is populated from database to dialog for editing values.
izmenaPredmeta.xhtml
<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Obrada predmeta</title>
</h:head>
<h:body>
<center>
<h:form>
<p:growl id="msgs" showDetail="true"/>
<h:dataTable var="list" value="#{pred.getPredmets()}" border="1" cellpadding="3" cellspacing="3" bgcolor="lightgray">
<h:column>
<f:facet name="header">Naziv</f:facet>
<h:outputText value="#{list.naziv}"/>
</h:column>
<h:column>
<f:facet name="header">Akronim</f:facet>
<h:outputText value="#{list.akronim}"/>
</h:column>
<h:column>
<f:facet name="header">Semestar</f:facet>
<h:outputText value="#{list.semestar}"/>
</h:column>
<h:column>
<f:facet name="header">Godina</f:facet>
<h:outputText value="#{list.god}"/>
</h:column>
<h:column>
<f:facet name="header">Odsek</f:facet>
<h:outputText value="#{list.odsek}"/>
</h:column>
<h:column>
<f:facet name="header">Aktivan</f:facet>
<h:outputText value="#{list.drzise}"/>
</h:column>
<h:column>
<f:facet name="header">Edit</f:facet>
<h:commandButton value="Edit" action="#{pred.edit()}" onclick="PF('dlg3').show();">
<f:param name="idp" value="#{list.idpred}"/>
</h:commandButton>
<p:dialog header="Edit" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="350">
<h:panelGrid id="panel" columns="2" cellpadding="5" border="1" bgcolor="gray">
<h:outputText value="Naziv"/>
<p:inputText style="width: 97%" value="#{pred.naziv}" required="true" requiredMessage="Naziv je obavezan"/>
<h:outputText value="Akronim"/>
<p:inputText style="width: 97%" value="#{pred.akronim}" required="true" requiredMessage="Akronim je obavezan"/>
<h:outputText value="Semestar"/>
<p:inputText style="width: 97%" value="#{pred.semestar}" required="true" requiredMessage="Semestar je obavezan"/>
<h:outputText value="Godina"/>
<p:inputText style="width: 97%" value="#{pred.god}" required="true" requiredMessage="Godina je obavezna"/>
<h:outputText value="Odsek"/>
<p:inputText style="width: 97%" value="#{pred.odsek}" required="true" requiredMessage="Odsek je obavezan"/>
<h:outputText value="Drzi se"/>
<p:inputText style="width: 97%" value="#{pred.drzise}" required="true" requiredMessage="Drzi se je obavezno"/>
<p:commandButton value="Save" action="#{pred.upPredmet()}" />
</h:panelGrid>
</p:dialog>
</h:column>
<h:column>
<f:facet name="header">Delete</f:facet>
<h:commandButton value="Delete" action="#{pred.delPredmet()}">
<f:param rendered="msgs" name="id" value="#{list.idpred}"/>
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>
</center>
</h:body>
and function from PredmetBean.java #ViewScoped implements Serializable
// getter's, setter's and other functions
public void edit(){
ArrayList<Predmet> PrList = Predmet.getPredmets();
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest();
int id = Integer.parseInt(request.getParameter("idp"));
for(Predmet pr : PrList){
if( pr.getIdpred() == id ){
this.setIdPred(pr.getIdpred());
this.setNaziv(pr.getNaziv());
this.setAkronim(pr.getAkronim());
this.setSemestar(pr.getSemestar());
this.setGod(pr.getGod());
this.setOdsek(pr.getOdsek());
this.setDrzise(pr.getDrzise());
}
}
}
when clicked on edit button dialog should open with values from row in witch the button is click. But only thing i get is dialog try to open and break and then requiredMessages pops up all over.
When in dialog for value is list.somename dialog shows and populate the fileds with the last object value in list.
If someone have idea how to solve this or some other method for editing user values without going to other page it would be great.

Keep the p:dialog outside the form and use binding attribute in your dataTable show in below Example.
Declare the below line your managed bean
private HtmlDataTable dataTable;
Add the below line in your dataTable
binding="#{managedBean.htmlDataTable}"
Then your edit method would be like this
public void edit(){
Predmet selectedObject = (Predmet) getDataTable().getRowData();
}
Hope this can help you

Related

How can I export image from every row of a dataTable to pdf using PrimeFaces DataExporter?

I have a XHTML displaying rows from a dataTable having few texts columns and one image column. I have been able to export the text columns for all the records in pdf, but I am not able to export the images in the rows. I searched in lots of posts to find out a way to export the images from the rows, but failed. Please note that I am not looking for exporting a single image for header or footer, which can be handled by preProcessor attribute in the p:dataExporter tag. I found good hints/examples for exporting single image using PreProcessor in dataExport tag. The hints are working fine for me. But I was unable to find any hint/example for row-wise image export. Please help!
My technology stack:
JSF2, PrimeFaces 4.0, itext-1.1.4, JDK1.8, GlassFish Server 4
My current xhtml output given below. I need to export the green ticks and red crosses to pdf.
My current xhtml output
My JSF/XHTML code:
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/templates/common.xhtml">
<ui:define name="content">
<h:panelGroup id="formTitle" layout="block">
<h:outputText value="#{bundle.ListUsersTitle}"></h:outputText>
</h:panelGroup>
<h:form styleClass="jsfcrud_list_form">
<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup>
<h:outputText escape="false" value="#{bundle.ListUsersEmpty}" rendered="#{usersController.items.rowCount == 0}"/>
<h:panelGroup rendered="#{usersController.items.rowCount > 0}">
<p:dataTable id="dtUsers" value="#{usersController.items}" var="item" scrollable="true" scrollHeight="500">
<p:column sortBy="#{item.id}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}" />
</p:column>
<p:column sortBy="#{item.userName}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userName}"/>
</f:facet>
<h:outputText value="#{item.userName}" />
</p:column>
<p:column sortBy="#{item.userPassword}" exportable="false">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userPassword}"/>
</f:facet>
<h:outputText value="#{item.userPassword}" />
</p:column>
<p:column id="userActiveCol" sortBy="#{item.userActive}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userActive}"/>
</f:facet>
<h:graphicImage id="yesId" value="/img/Yes.png" alt="Yes" rendered="#{item.userActive == 'Y'}"/>
<h:graphicImage id="noId" value="/img/No.png" alt="No" rendered="#{item.userActive == 'N'}"/>
</p:column>
<p:column sortBy="#{item.userSource}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_userSource}"/>
</f:facet>
<h:outputText value="#{(item.userSource == 'ORGANIZATION')?'Organization':
(item.userSource == 'VENDOR')?'Vendor':
(item.userSource == 'VENDORRESOURCE')?'Vendor Resource':
(item.userSource == 'CUSTOMER')?'Customer':'Not Known'}" />
</p:column>
<p:column sortBy="#{item.resourceId}">
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_resourceId}"/>
</f:facet>
<h:outputText value="#{item.resourceId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListUsersTitle_resourceName}"/>
</f:facet>
<h:outputText value="#{usersController.getResourceName(item)}" />
</p:column>
<p:column headerText=" " exportable="false">
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.prepareView}" value="#{bundle.ListUsersViewLink}"/>
</h:panelGroup>
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.prepareEdit}" value="#{bundle.ListUsersEditLink}"/>
</h:panelGroup>
<h:panelGroup styleClass="formRowAction">
<p:commandLink action="#{usersController.destroy}"
value="#{bundle.ListUsersDestroyLink}" />
</h:panelGroup>
</p:column>
</p:dataTable>
</h:panelGroup>
<br />
<h:panelGroup styleClass="formBottomActions">
<h:panelGroup>
<h:commandLink action="#{usersController.prepareCreate}" value="#{bundle.ListUsersCreateLink}"/>
</h:panelGroup>
<h:panelGroup>
<p:commandLink value="#{bundle.ExportPDF}" immediate="true" id="generatePDFId" ajax="false">
<p:dataExporter type="pdf" target="dtUsers" fileName="Users"/>
</p:commandLink>
</h:panelGroup>
<h:panelGroup>
<h:link outcome="/subMenu" value="#{bundle.SubMenuLink}"/>
</h:panelGroup>
<h:panelGroup>
<h:commandLink action="#{menuHandler.returnToMainMenu}" value="#{bundle.mainMenuLink}"/>
</h:panelGroup>
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
</html>
PDF that is currently getting generated. The green ticks and red crosses should appear in the column "User Active".
PDF that is currently getting generated
The PrimeFaces exporter does not export images from cells only text. You will have to write a custom PDF exporter to meet your needs.

My form does not get some object push values for Controller

When I need to look up the object that my controller finds in the base and return the object, but in my form does not show, only some fields.
When the field is disabled true the value is show but if disabled is false is not show !!
My form
<h:form id="frm" prependId="false">
<p:panelGrid columns="2" layout="grid"
styleClass="panelgrid-noborder"
style="margin-top: 10px;"
columnClasses="ui-grid-col-1, ui-grid-col-2">
<p:outputLabel value="Id" for="id"/>
<p:inputText id="id"
value="#{planoController.plano.id}"
disabled="true">
<p:ajax event="blur" update="frm" listener="#{planoController.findById()}"/>
</p:inputText>
</p:panelGrid>
<p:panelGrid columns="2" layout="grid"
styleClass="panelgrid-noborder"
style="margin-top: 10px;"
columnClasses="ui-grid-col-1, ui-grid-col-6">
<p:outputLabel value="Nome" for="nome"/>
<p:inputText id="nome"
value="#{planoController.plano.nome}"/>
</p:panelGrid>
<p:dataTable id="tblPlanos"
value="#{planoController.planos}"
var="plano"
rows="20"
paginator="true"
paginatorPosition="bottom"
reflow="true"
emptyMessage="Nenhum Plano Cadastrado">
<p:column headerText="#" width="5%">
<p:commandButton icon="ui-icon-pencil" update="frm" immediate="true">
<f:setPropertyActionListener value="#{plano}" target="#{planoController.planoSelecionado}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
My Controller
public void setPlanoSelecionado(Plano planoSelecionado) {
this.planoSelecionado = planoSelecionado;
findPlanoSelecionado();
}
/**
* Retorna Plano Selecionado
* */
public void findPlanoSelecionado(){
plano = this.planoService.findById(planoSelecionado.getId());
}

Primefaces datatable not editing

I'm trying to make editable primefaces datatable. I'm using http://www.primefaces.org/showcase/ui/datatableRowEditing.jsf. All database table data showing up, but then I trying to edit data in a table I'm getting following error:
/index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null: javax.el.PropertyNotFoundException: /index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null
index.xhtml
<h:head>
<title>index.xhtml</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable var="u" value="#{logonTest.userList}" id="carList" editable="true">
<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="Name" style="width:30%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Surname" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.surname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.surname}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
TableBean.java
public void onEdit(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Edited", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Cancelled", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}

Primefaces datatable each row error message

I am trying to show an error message for each row inside a primefaces datatable
Here is my xhtml, I removed some of the tags and some javascript functions are omitted for the sake of clarity
<f:view>
<h:form id="mainEditForm">
<!-- <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" /> -->
<p:dataTable id="configTable"
value="#{favoriteReportsQueries.myFavoriteReportsQueriesPreferences}"
var="repList"
selection="#{favoriteReportsQueries.selectedFavoriteReportsQueries}"
rowKey="#{repList.reportFavoriteName}">
<p:column headerText="Report / Query">
<h:selectOneMenu id="reportQuery" value="#{repList.reportURL} onchange="submit();" update="reportGivenName">
<f:valueChangeListener type="cmecf.ui.favoritereports.validator.CustomNameValueChangeListener" />
<f:selectItems
value="#{favoriteReportsQueries.applicationReportsAndQueries}"
var="appRepList" itemValue="#{appRepList.value}"
itemLabel="#{appRepList.label}" />
</h:selectOneMenu>
</p:column>
**<p:column headerText="Custom Name">
<p:inputText id="reportGivenName"
value="#{repList.reportFavoriteName}" size="50"/>
<f:validator validatorId="cmecf.favoritereports.CustomValidator" for="reportGivenName"/>
<p:message for="reportGivenName"/>
</p:column>**
<p:column style="width:10px;">
<f:facet name="header">
Delete
</f:facet>
<p:selectBooleanCheckbox id="deleteId"
styleClass="selectBooleanCheckbox"
value="#{repList.delete}">
<p:ajax event="valueChange" process="#this"></p:ajax>
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
<h:panelGrid columns="7">
<p:column>
<p:commandButton id="savePrefs"
action="#{favoriteReportsQueries.storeReportsPreferences}"
oncomplete="resizeiFrame()"
value="Save" ajax="false" />
</p:column>
<p:column></p:column>
<p:column>
<p:commandLink value="Add New"
action="#{favoriteReportsQueries.addNewRow}"
oncomplete="resizeiFrame()"
update="configTable" />
</p:column>
<p:spacer width="2px"></p:spacer>
<p:column>
<p:commandLink type="reset" value="Clear"
action="#{favoriteReportsQueries.restorePreferences}"
oncomplete="resizeiFrame()"
update="configTable" ajax="false" />
</p:column>
<p:column></p:column>
<p:column>
<p:commandLink value="Cancel"
action="#{favoriteReportsQueries.cancel}"
ajax="false" />
</p:column>
</h:panelGrid>
</h:form>
</f:view>
I implemented the validator which just returns an error message
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;
#FacesValidator("cmecf.favoritereports.CustomValidator")
public class CustomNameValidator implements Validator{
#Override
public void validate(FacesContext context, UIComponent component,
Object value) throws ValidatorException {
FacesMessage msg =
new FacesMessage("Name already exists",
"Invalid name");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(msg);
}
}
When I run this app I am getting this error
<f:validator> Parent not composite component or an instance of EditableValueHolder: org.primefaces.component.column.Column#be0296
Thanks in advance
Sai
try this..
<p:inputText id="reportGivenName"
value="#{repList.reportFavoriteName}" size="50">
<f:validator validatorId="cmecf.favoritereports.CustomValidator" />
</p:inputText>

Datatable as master, dialog as details

I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.