How to align this selectOneMenu?
I have the same problem in other pages.
Code:
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:namespace="http://java.sun.com/jsf/composite/namespace"
xmlns:sec="http://www.springframework.org/security/facelets/tags">
<!--
Replace path to template, title, header and body
with actual data.
-->
<ui:composition template="Template.xhtml">
<ui:define name="content">
<div class="content_wrapper">
<div class="content">
<sec:ifAnyGranted roles="ROLE_ADMINISTRADOR,ROLE_USUARIO,ROLE_GERENCIADOR">
<h:form id="formGrid">
Data Inicial: <p:calendar id="popup" value="#{relatorioHistoricoMB.dataInicial}" />
Data Final: <p:calendar id="popup2" value="#{relatorioHistoricoMB.dataFinal}" />
<p:selectOneMenu value="#{relatorioHistoricoMB.reservatorio.idReservatorio}"
style="width:170px" required="true"
requiredMessage="Selecione algum.">
<f:selectItem itemLabel="Selecione o Reservatório" itemValue="0" />
<f:selectItems value="#{relatorioHistoricoMB.listaReservatorio}"
var="reservatorio" itemLabel="#{reservatorio.nomeReservatorio}"
itemValue="#{reservatorio.idReservatorio}" />
</p:selectOneMenu>
<p:commandButton value="Gerar relatório" update="formGrid"
actionListener="#{relatorioHistoricoMB.executar}" />
<p:dataTable id="Grid" var="historico"
value="#{HistoricoBean.listaHistorico}"
selection="#{HistoricoBean.historico}" selectionMode="single"
rowKey="#{historico.idHistorico}" paginator="true" rows="5">
<f:facet name="header">
<h:outputText value="Historico" />
</f:facet>
<p:column headerText="Reservatorio">
<f:facet name="header">
<h:outputText value="Reservatorio" />
</f:facet>
<h:outputText value="#{historico.reservatorio.nomeReservatorio}" />
</p:column>
<p:column headerText="Bomba">
<f:facet name="header">
<h:outputText value="Bomba" />
</f:facet>
<h:outputText value="#{historico.bomba.nomeBomba}" />
</p:column>
<p:column headerText="Data">
<f:facet name="header">
<h:outputText value="Data" />
</f:facet>
<h:outputText value="#{historico.dataHistorico}" />
</p:column>
<p:column headerText="Evento">
<f:facet name="header">
<h:outputText value="Evento" />
</f:facet>
<h:outputText value="#{historico.novoStatusHistorico}" />
</p:column>
</p:dataTable>
</h:form>
</sec:ifAnyGranted>
</div>
</div>
</ui:define>
</ui:composition>
</html>
you can try place your elements into p:panelGrid
http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml
but primefaces datatable can use filter:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
Related
i have problem in row selection after applying default filter using primefaces 5.2 and jsf 2.2
Primefaces default filter work fine but when i select row to edit i got a wrong row .
My code is attached below :
<?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">
<ui:composition 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"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
>
<f:facet name="header">
<p:outputPanel >
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();">
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
Here we go with primefaces example:
What is important:
in this code set editable="true"
p:ajax event="rowEdit" and p:ajax event="rowEditCancel" both listeners
f:facet name="output" and f:facet name="input" for display, and
edit a column with p:rowEditor
CODE .xhtml:
<p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
<f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.brand}" style="width:100%">
<f:selectItems value="#{dtEditView.brands}" 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}" style="width:100%">
<f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
in my table i have column named actions that contains two icons one for update row and the other for delete row.I like to work like that.I have also iput text in order to filter my table and it's work.but if the function PF('carsTable').filter() is called i cannot get the right row selected !
IistUsers.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">
<ui:composition 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"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List" rendered="true">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
filteredValue="#{typeUtilisateurBean.filteredTypeUtilisateur}"
id="Type_Utilisateur_Table"
>
<f:facet name="header">
<p:outputPanel autoUpdate="true">
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none" filterMatchMode="contains">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();"
>
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
TypeUtilisateurBean:
package tn.com.bj.presentation;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ViewScoped;
import javax.faces.model.ListDataModel;
import org.primefaces.context.RequestContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import tn.com.bj.entities.TypeUtilisateur;
import tn.com.bj.service.ITypeUtilisateurService;
#Controller("typeUtilisateurBean")
#Scope("session")
#ViewScoped
public class TypeUtilisateurBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
#Autowired
#Qualifier("typeutilisateurService")
private ITypeUtilisateurService typeUtilisateurService;
private TypeUtilisateur typeUtilisateur = new TypeUtilisateur();
private ListDataModel listTypeUtilisateur;
private List<TypeUtilisateur> filteredTypeUtilisateur;
#PostConstruct
public void init() {
listTypeUtilisateur = new ListDataModel();
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void create() {
typeUtilisateur = new TypeUtilisateur();
}
public void getRow() {
typeUtilisateur = (TypeUtilisateur) listTypeUtilisateur.getRowData();
}
public void delete() {
getRow();
typeUtilisateurService.deleteService(typeUtilisateur);
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void save() {
typeUtilisateur = typeUtilisateurService
.saveOrUpdateService(typeUtilisateur);
init();
}
public ITypeUtilisateurService getTypeUtilisateurService() {
return typeUtilisateurService;
}
public void setTypeUtilisateurService(
ITypeUtilisateurService typeUtilisateurService) {
this.typeUtilisateurService = typeUtilisateurService;
}
public TypeUtilisateur getTypeUtilisateur() {
return typeUtilisateur;
}
public void setTypeUtilisateur(TypeUtilisateur typeUtilisateur) {
this.typeUtilisateur = typeUtilisateur;
}
public ListDataModel getListTypeUtilisateur() {
return listTypeUtilisateur;
}
public void setListTypeUtilisateur(ListDataModel listTypeUtilisateur) {
this.listTypeUtilisateur = listTypeUtilisateur;
}
public List<TypeUtilisateur> getFilteredTypeUtilisateur() {
return filteredTypeUtilisateur;
}
public void setFilteredTypeUtilisateur(
List<TypeUtilisateur> filteredTypeUtilisateur) {
this.filteredTypeUtilisateur = filteredTypeUtilisateur;
}
}
I need create a list of Phones in na and submit before.
In my firt try the object came empty and the list shows a list of null objets
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" immediate="true" value="adicionar" update=":messageGrowl listPhones"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
in my second try the object was filled but the Litt does update
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" partialSubmit="true" process="gridPhone, listPhones" value="adicionar" update=":messageGrowl"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
I have try sereval forms but dont work
:(
i got this error while creating index.xhtml. i'm working with primefaces 3.4
in my page index ,i will display a list of zones and when i click on the add button ,a dialog window should appear.the error is :
"javax.faces.FacesException: Cannot find component with identifier "nZone" referenced from "j_idt10"."
<?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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Listes des zones</title>
<link type="text/css" rel="stylesheet" href="dot-luv/theme.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="left" header="Atividades" resizable="true" closable="true" collapsible="true">
<h:form prependId="false">
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
</h:form>
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout">
<h:outputText value="Sair"/>
</h:outputLink>
</p:layoutUnit>
<p:layoutUnit position="center">
<h1>Listes des zones</h1><br/>
<br/><br/>
<h:form prependId="false">
<p:dataTable id="table" var="zone" value="#{ZoneController.listZones}">
<p:column>
<f:facet name="header">
<h:outputText value="Zone"/>
</f:facet>
<h:outputText value="#{zone.nomzone}" />
</p:column>
<f:facet name="header">
<h:outputText value="Modifier"/>
</f:facet>
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
<p:column>
<f:facet name="header">
<h:outputText value="Supprimer"/>
</f:facet>
<h:commandLink action="#{ZoneController.DeleteZone}" value="Supprimer"/>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
</p:layout>
<p:dialog header="Ajouter Zone" widgetVar="dialogGerLivro" resizable="false" modal="true" showEffect="slide" width="500">
<h:form prependId="false">
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
<h:outputLabel for="titulo" value="Título:" />
<h:inputText id="titulo" value="#{ZoneController.zone.nomzone}"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.SaveZone}" value="Insérer Zone"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.UpdateZone}" value="Modifier Zone"/>
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</ht
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
is inside a h:form which is another NamingContainer, where you
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
and
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
Try refering to it with update=":nZone". See the link to the other question for more information.
I have a strange behavior with rowEdit of dataTable. when I modify a row of the table the row is modified successfully, but I can not refresh the form or the page, I tried the solution
<p:ajax event="rowEdit" update="#form" listener="#{pecBean.onEdit}"/>
result: the form is not completely displayed. then I tried
<p:ajax event="rowEdit" update="#all" listener="#{pecBean.onEdit}"/>
result: the page is not fully refreshed
below the full source code.
<!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:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>(For validation only)</title>
<link href="./css/styles.css" rel="stylesheet" type="text/css" />
</h:head>
<body class="bodyMain">
<composite:interface />
<composite:implementation>
<h:form id="form" prependId="false">
<h:panelGrid>
<h:panelGrid id="recapActes">
<h:panelGrid>
<p:panel id="recapGlobale" header="Récap globale Prise en charge">
<h:panelGrid>
<h:panelGrid columns="4">
<h:outputText styleClass="lib" value="Total PEC Base" />
<h:outputText styleClass="valeur"
value="#{pecBean.recapPec.totalRemboursementBase}">
</h:outputText>
<h:outputText styleClass="lib" value="Total PEC complémentaire" />
<h:outputText styleClass="valeur"
value="#{pecBean.recapPec.totalRemboursementComplementaire}">
</h:outputText>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</h:panelGrid>
<h:panelGrid>
<p:dataTable sortBy="#{am.acte.categorieActe.code}"
editable="true" rowKey="#{am.idActePec}"
value="#{pecBean.actesPec}" var="am">
<p:ajax event="rowEdit" update="#all"
listener="#{pecBean.onEdit}" />
<p:column>
<f:facet name="header">Code acte</f:facet>
#{am.acte.code}
</p:column>
<p:column styleClass="bla">
<f:facet name="header">Lib acte</f:facet>
#{am.acte.libelle}
</p:column>
<p:column>
<f:facet name="header">Coefficient</f:facet>
#{am.coefficientActe}
</p:column>
<p:column>
<f:facet name="header">Quantité souscrite</f:facet>
#{am.quantiteActeSouscrit}
</p:column>
<p:column>
<f:facet name="header">Quantité accordée</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{am.quantiteActeAccorde}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{am.quantiteActeAccorde}" required="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">Observation</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{am.observation}" />
</f:facet>
<f:facet name="input">
<h:inputTextarea value="#{am.observation}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">Pec Base</f:facet>
<h:outputText value="#{am.rembBase}">
</h:outputText>
</p:column>
<p:column style="text-align:right">
<f:facet name="header">Pec Compl</f:facet>
<h:outputText
value="#{am.rembComplementaire}">
</h:outputText>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:form>
</composite:implementation>
</body>
</html>
thanks for any help.
I'm following the example given at http://www.primefaces.org/showcase/ui/datatableRowSelectionSingle.jsf
I'm using this as a portlet in Liferay. Here is my code:
The HTML:
<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">
<h:form id="form">
<h:panelGrid columns="1" cellpadding="10" width="100%">
<p:dataTable id="campaignTable" var="data"
value="#{campaign.allCampaigns}" selectionMode="single"
rowKey="#{data.campaignId}" selection="#{campaign.selectedCampaign}">
<f:facet name="header">
<p:commandButton type="button" value="Create Campaign" icon="ui-icon-document" update=":form:createForm" onclick="createDialog.show()" />
</f:facet>
<p:column sortBy="#{data.campaignId}">
<f:facet name="header">ID</f:facet>
<h:outputText value="#{data.campaignId}" />
</p:column>
<p:column sortBy="#{data.carrier}">
<f:facet name="header">Carrier</f:facet>
<h:outputText value="#{data.carrier}" />
</p:column>
<p:column sortBy="#{data.shortCode}">
<f:facet name="header">Short Code</f:facet>
<h:outputText value="#{data.shortCode}" />
</p:column>
<p:column sortBy="#{data.sendType}">
<f:facet name="header">Send Type</f:facet>
<h:outputText value="#{data.sendType}" />
</p:column>
<p:column sortBy="#{data.startDate}">
<f:facet name="header">Start Date</f:facet>
<h:outputText value="#{data.startDate.time}">
<f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
</h:outputText>
</p:column>
<p:column sortBy="#{data.endDate}">
<f:facet name="header">End Date</f:facet>
<h:outputText value="#{data.endDate.time}">
<f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
</h:outputText>
</p:column>
<p:column sortBy="#{data.messageText}">
<f:facet name="header">Text Message</f:facet>
<h:outputText value="#{data.messageText}" />
</p:column>
<p:column sortBy="#{data.serviceId}">
<f:facet name="header">Service ID</f:facet>
<h:outputText value="#{data.serviceId}" />
</p:column>
<p:column sortBy="#{data.responseKeyword}">
<f:facet name="header">Response Keyword</f:facet>
<h:outputText value="#{data.responseKeyword}" />
</p:column>
</p:dataTable>
</h:panelGrid>
<p:dialog id="createDialog" header="Create Campaign" widgetVar="createDialog">
<h:panelGrid id="createForm" columns="2" cellpadding="5">
<h:outputLabel for="campaignId" value="Campaign ID:" />
<p:inputText value="#{campaign.selectedCampaign.campaignId}" id="campaignId" required="true" label="Campaign ID" />
<h:outputLabel for="startDate" value="Start Date:" />
<p:inputText value="#{campaign.selectedCampaign.startDate}" id="startDate" required="true" label="Start Date" />
<f:facet name="footer">
<p:commandButton id="createCampaignButton" value="Create" update=":growl" actionListener="#{campaign.createCampaign()}" />
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
</ui:composition>
And the backing bean:
#ManagedBean
#ViewScoped
public class Campaign implements Serializable {
private List<CampaignBean> allCampaigns;
private CampaignBean selectedCampaign;
public Campaign() {
MyProxy proxy = new MyProxy();
try {
CampaignsResponse response = proxy.getAllCampaigns();
if (response != null) {
setAllCampaigns(new ArrayList<CampaignBean>(Arrays
.asList(response.getCampaigns())));
}
} catch (RemoteException e) {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Error",
"Problem listing campaigns"));
}
}
public void createCampaign() {
}
/* Getters and Setters */
public List<CampaignBean> getAllCampaigns() {
return allCampaigns;
}
public void setAllCampaigns(List<CampaignBean> allCampaigns) {
this.allCampaigns = allCampaigns;
}
public CampaignBean getSelectedCampaign() {
return selectedCampaign;
}
public void setSelectedCampaign(CampaignBean selectedCampaign) {
this.selectedCampaign = selectedCampaign;
}
}
The form is not populated with the selected row values!
I finally figured out what the problem was. The entire table was inside a "TabView" component. I was using the wrong selector i.e. instead of using update=":form:createForm" I should have used update=":tabView:form:createForm" and remove the type="button" declaration.