i have an issue. I have one form and a dialog with another form inside. The second form has a datatable with radiobutton selection. When i open the dialog by first time, the selection is shown fine. I close the dialog. But when i try with another element, the selection on the datatable don't be updated.
The configuration that i use is:
Mojarra 2.2.4
Primefaces 4.0
But, if i use the Primefaces 3.5 version, it works.
I attach the xhtml files.
First file
<h:form id="formPlanificarCursos">
<p:outputPanel styleClass="pnlDeclaracionMessages">
<p:messages showSummary="true" />
</p:outputPanel>
<p:panel id="pnlPlanHorarioCurso" styleClass="pnlPlanHorarioCurso non-borders">
<components:titleSeparator title="Horarios de Curso" />
<!-- Toolbar -->
<p:outputPanel layout="block" styleClass="toolbar">
<p:commandLink id="btnAgregar" update="#(.dlgHorarioCurso)"
oncomplete="jQuery('.dlgHorarioCurso .ui-dialog-title').text('#{plan_msgs['planCurso.registrar.titulo']}'); dlgHorarioCurso.show();">
<h:graphicImage value="/resources/images/document_add.png" />
</p:commandLink>
<p:tooltip for="btnAgregar" value="Agregar Horario" />
</p:outputPanel>
<p:schedule id="scheduleCurso" minTime="6" value="#{detallePlanCursoBean.scheduleModel}" styleClass="scheduleCurso schedule-without-days"
allDaySlot="false" showHeader="false" view="agendaWeek" axisFormat="HH:mm" timeFormat="H:mm{ - H:mm}" aspectRatio="4" locale="es"
widgetVar="scheduleCurso">
<p:ajax event="eventSelect" listener="#{detallePlanCursoBean.onEventSelect}" update="#(.dlgHorarioCurso)"
oncomplete="jQuery('.dlgHorarioCurso .ui-dialog-title').text('#{plan_msgs['horarioCurso.modificar.titulo']}'); dlgHorarioCurso.show();" />
</p:schedule>
<f:facet name="footer">
<div class="div-botonera">
<p:commandButton id="btnAceptar" value="Aceptar" action="#{detallePlanCursoBean.registrarDetallePlanCurso}" />
<p:commandButton id="btnCancelar" value="Cancelar" action="#{detallePlanCursoBean.irConsultarPlanCurso}" immediate="true" />
</div>
</f:facet>
</p:panel>
</h:form>
<!-- Agregar Disponibilidad Horaria -->
<p:dialog widgetVar="dlgHorarioCurso" styleClass="dlgHorarioCurso" modal="true" resizable="false" closable="false">
<p:ajax event="close" listener="#{detallePlanCursoBean.cancelarHorarioCurso}" />
<ui:include src="/planificacion/horarioCurso.xhtml" />
</p:dialog>
Second file
<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" xmlns:o="http://omnifaces.org/ui"
xmlns:components="http://java.sun.com/jsf/composite/components">
<h:form id="frmHorarioCurso">
<p:panel styleClass="pnlHorarioCurso non-borders">
<p:messages id="messagesfrmHorarioCurso" />
<components:titleSeparator title="Aula" />
<p:outputPanel id="pnlAulas" styleClass="pnlAulas" style="border-width:0px;">
<p:dataTable emptyMessage="No hay aulas para seleccionar." var="aula" id="grdAulas" styleClass="grdAulas"
value="#{detallePlanCursoBean.aulaModel}" selection="#{detallePlanCursoBean.detallePlanCursoDTO.aula}" rows="3" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
currentPageReportTemplate="({currentPage} de {totalPages})" paginatorPosition="bottom" paginatorAlwaysVisible="false" widgetVar="grdAulas">
<p:column selectionMode="single" style="width:15px;" />
<p:column headerText="Nombre">
<h:outputText value="#{aula.nombre}" />
</p:column>
<p:column headerText="Ubicación">
<h:outputText value="#{aula.locacion.nombre}" />
</p:column>
<p:column headerText="Capacidad" style="text-align:center;width:100px;">
<h:outputText value="#{aula.capacidad}" />
</p:column>
<p:column headerText="Accesibilidad" style="width:10%; text-align:center;">
<p:selectBooleanCheckbox value="#{aula.accesible}" disabled="true" />
</p:column>
</p:dataTable>
</p:outputPanel>
<f:facet name="footer">
<div class="div-botonera">
<p:commandButton value="Aceptar" action="#{detallePlanCursoBean.agregarHorarioCurso}" update="#(.pnlHorarioCurso)"
oncomplete="if(!args.validationFailed) HorarioCurso.handleComplete(xhr, status, args);" />
<p:commandButton value="Cancelar" oncomplete="scheduleCurso.update(); dlgHorarioCurso.hide();" update="#(.pnlHorarioCurso)" immediate="true"
action="#{detallePlanCursoBean.cancelarHorarioCurso}" />
</div>
</f:facet>
</p:panel>
</h:form>
I appreciate your help.
I was having a problem similar to this. I had a dialog which was being opened with information based on a pre-selected dataTable row, but the content of this dialog was not being updated after the first time it was opened.
I solved my problem by adding the attribute "process=#form" to my commandLink and in your case i think the update attribute should be update=":dlgHorarioCurso"
Related
This question already has answers here:
How to show details of current row from p:dataTable in a p:dialog and update after save
(1 answer)
p:resetInput does not reset the p:dialog when it is reopened
(1 answer)
Closed 2 years ago.
I have a problem with resetting the values of a <p: selectOneMenu> component that is housed within a <p: dialog> component, it turns out that I have declared the <p: dialog> on the same page where I show it with a < p: commandButton> and I want that when I finish editing the data and press the button again, the component <p: selectOneMenu> comes out with the initial values, and this is not happening, instead it keeps the selection I made previously. Thank you very much for the help you can give me. this is the code of the page. I don't think it is necessary to put the code for the backing beans but they do need it without problem.
<?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:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<body class="areaContenido">
<ui:composition template="../resources/template/tgeneral.xhtml">
<ui:define name="content" class="areaContenido">
<h:form id="guser">
<p:growl id="msgs" showDetail="true" />
<p:dataTable var="usermio" value="#{userBean.lazyModel}" paginator="true" rows="10" class="FuentTable" rowKey="#{usermio.id}"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" id="userTable" lazy="true">
<f:facet name="header">
<p:outputLabel value="Gestión de usuarios del sistema" style="font-weight: bold; text-align: center;"/>
</f:facet>
<p:column headerText="Id" width="5%">
<h:outputText value="#{usermio.id}" />
</p:column>
<p:column headerText="Usuario" width="15%" >
<h:outputText value="#{usermio.usuario}" />
</p:column>
<p:column headerText="Nombre" width="20%">
<h:outputText value="#{usermio.nombre}"/>
</p:column>
<p:column headerText="Apellidos" width="25%">
<h:outputText value="#{usermio.apellidos}" />
</p:column>
<p:column headerText="Rol" width="15%">
<h:outputText value="#{usermio.rol.rol}" />
</p:column>
<p:column headerText="Opt" width="15%">
<p:commandButton value="" update=":guser:userEdit" onclick="PF('userDial').show()" icon="ui-icon-pencil" ajax="true" >
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
<p:commandButton value="" update=":guser:userEdit" onclick="PF('cd').show()" icon="ui-icon-key" ajax="true">
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
<p:commandButton value="" update=":guser:userEdit" onclick="PF('cd').show()" icon="ui-icon-cancel" ajax="true">
<f:setPropertyActionListener value="#{usermio}" target="#{userBean.selecteduser}" />
</p:commandButton>
</p:column>
<f:facet name="footer">
<p:button icon="ui-icon-plus" id="nuevo" value="Nuevo" href="/glitic/adm/register.xhtml" title="Nuevo usuario" />
</f:facet>
</p:dataTable>
<p:dialog header="Edición de datos" widgetVar="userDial" modal="true" showEffect="bounce" hideEffect="fade" resizable="false" class="Fuent" responsive="true" >
<p:outputPanel id="userEdit" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selecteduser}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selecteduser.id}" />
<h:outputText value="Usuario" />
<p:inputText value="#{userBean.selecteduser.usuario}" id="username" required="true" requiredMessage="Se necesita el usuario"/>
<h:outputText value="Nombres" />
<p:inputText value="#{userBean.selecteduser.nombre}" id="nombre" required="true" requiredMessage="Se necesita el nombre"/>
<h:outputText value="Apellidos" />
<p:inputText value="#{userBean.selecteduser.apellidos}" id="apellidos" required="true" requiredMessage="Se necesita los apellidos"/>
<h:outputText value="Rol" />
<p:selectOneMenu id="sroles" value="#{userBean.selectedrol}" style="width:160px" effect="fold" >
<f:selectItem itemLabel="Escoja un rol para el usuario" itemValue="" />
<f:selectItems value="#{userBean.roles}" var="xroles" itemLabel="#{xroles.rol}" itemValue="#{xroles.id}" />
</p:selectOneMenu>
<h:outputText value="Guardar cambios:" />
<p:commandButton value="Guardar" action="#{cttobean.NVenta()}" ajax="false"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
I'm using a modal window to select a value. After i make a selection and open the modal window again. I want the modal list be filtered on the selectedValue.
It goes back to the front page.
and if open modal again and select 'ABC', it should look like this:
this is look up and which list should be put in modal xhtml:
<ui:composition 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"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:panel id="dialog-content">
<h:form id="accountLookUpModal" style="width: 777px">
<p:panelGrid id="Info" columns="2" columnClasses="labelColumn,fieldColumn">
<!-- TYPE -->
<h:outputLabel id="AccountType" for="accountType" value="#{message['field.type']}" />
<p:selectOneMenu id="accountType" rendered="#{not empty account.criteria}" value="#{account.criteria.accountType}" converter="#{enumerationConverter}" disabled="#{account.disableLookUp}">
<p:ajax event="change" listener="#{account.filterOnType(true)}" update="#form, :dataTableForm"/>
<f:selectItems itemLabelEscaped="true" value="#{enumerationBean.getaccountTypeList()}" var="c" itemLabel="#{message[c.bundleKey]}" itemValue="#{c}"/>
</p:selectOneMenu>
</p:panelGrid>
</h:form>
<h:form id="dataTableForm" prependId="false" style="width:777px;">
<!-- INCLUDE Account Table -->
<ui:include src="/includes/accountLookUp.xhtml">
<ui:param name="PANEL_ID" value="accountActionPanel" />
<ui:param name="DT_ID" value="accountTable" />
<ui:param name="DT_DATA" value="#{account.accountTableLookUp}" />
<ui:param name="CR_BEAN" value="#{accountBean}" />
</ui:include>
</h:form>
</p:panel>
</ui:composition>
This is the xhtml used to select the update the list:
<ui:composition 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:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<p:dataTable id="#{DT_ID}" var="acc" emptyMessage="" value="#{DT_DATA.values}" rowIndexVar="index"
paginator="true" selection="#{DT_DATA.selectedValues}" rows="8" paginatorPosition="top"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
editable="false" lazy="true" sortBy="#{acc.name}" sortOrder="ascending"
liveResize="true" filterDelay="100">
<p:ajax event="filter" listener="#{DT_DATA.onFilter}" />
<p:ajax event="rowToggle" listener="#{account.expandLookUp(acc)}" immediate="true"/>
<p:column styleClass="ui-column-rowtoggler" exportable="false">
<p:rowToggler id="cdtlu#{DT_ID}RT"/>
</p:column>
<!-- filterBy="#{acc.name}" -->
<p:column id="accountName" sortBy="#{acc.name}" filterBy="#{acc.name}" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}accountName" value="#{message['field.name']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}accountName" value="#{acc.name}"/>
</p:column>
<!-- filterBy="#{acc.city}" -->
<p:column id="accountCity" sortBy="#{acc.city}" filterBy="#{acc.city}" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}accountCity" value="#{message['field.city']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}accountCity" value="#{acc.city}" />
</p:column>
<!-- filterBy="#{acc.countryCode}" -->
<p:column id="accountCountry" sortBy="#{acc.countryCode}" filterOptions="#{enumerationBean.accountList}" filterBy="countryCode" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}CountryCode" value="#{message['field.countryCode']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}TCountryCode" value="#{message[acc.countryCode.bundleKey]}" />
</p:column>
<p:column id="sel" styleClass="ui-column-rowtoggler">
<f:facet name="header">
<h:outputText id="cu#{DT_ID}Sel" value="#{message['common.sel']}" />
</f:facet>
<p:commandButton action="save-dialog" id="cu#{DT_ID}BtnSel"
actionListener="#{companySearchBean.updateCompanyOwner(acc)}"
icon="ui-icon ui-icon-e-w" >
</p:commandButton>
</p:column>
</p:dataTable>
</ui:composition>
Now i would like to filter with 'name' so that it looks it last picture. I used filterValue but then filterBy doesn't work properly and it produces null. In the nutshell if I select 'ABC' and then open the modal again. it should only contain list contain name like 'ABC'.
I'm new to prime faces so any help would be appreciated. Also i apologize for terrible diagrams.
I have a simple input text inside a primefaces dialog with a command button to test if the variable gets his value but when i click the command button with(process="#this" when i delete it the button dont work any more)to print the value of the property it shows always null ... the dialog is rented by a command link from a data grid and when i delete the dialog every thing works fine and the property get th value this is the jsf page :
<p:layoutUnit id="center" position="center"
style="min-height:400px;min-width:300px;overflow-y:hidden !important"
header="#{messages['layout.center.header']}">
<f:view>
<h:form >
<p:dataGrid var="c" value="#{rentMB.carsList}" columns="3"
layout="grid" rows="12" paginator="true" id="cars"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:facet name="header">
Available Cars
</f:facet>
<p:panel header="#{c.car_brand.brand_name}"
style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage url="/images/#{c.image}.jpg" />
<p:commandLink
oncomplete="PF('carDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-key"
style="margin:0 auto;" />
<f:setPropertyActionListener value="#{c}"
target="#{rentMB.selectedCar}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
<h:form>
<p:dialog header="Car Info" id="carInfo" widgetVar="carDialog" width="900px"
height="400px" showEffect="fade" hideEffect="fade"
resizable="false" appendToBody="true">
<p:outputPanel>
<h:panelGrid columns="3" >
<f:facet name="header">
Client informations
</f:facet>
<h:outputLabel for="adress" value="Adress : *" />
<p:inputText id="adress" value="#{rentMB.adress}"
/>
<p:watermark for="adress" value="Adress" />
<p:commandButton action="#{rentMB.affiche}" process="#this" value="Rent" oncomplete="carInfo.hide();" > </p:commandButton>
<p:commandButton type="reset" value="Reset"> </p:commandButton>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</f:view>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
the code of rentMB.affiche() :
public void affiche()
{
System.out.println(this.getAdress());
}
the solution is to put the content of the p:dialog between <h:form></h:form> and add to dialog appendToBody="false"
Well, I have a p:dialog that inserts a new Entity, but after this entity is saved into database the p:dataTable remains the same, the new row doesn't appear.
Look at my p:dialog:
<!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">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:form id="formCadastrar">
<p:dialog width="900px" height="500px" header="Cadastrar Dentista"
widgetVar="dialogCadastrar" modal="true">
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" type="button" />
</p:panelGrid>
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Nome: *" />
<p:inputText id="nome"
value="#{dentistaMB.dentista.pessoaFisica.nome}" size="40"
required="true" requiredMessage="O Nome do Dentista é obrigatório">
</p:inputText>
<h:outputText value="CRO *" />
<p:inputText id="cro" value="#{dentistaMB.dentista.cro}" size="10"
required="true" requiredMessage="O Número do CRO é obrigatório" />
</p:panelGrid>
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" />
</p:panelGrid>
<p:confirmDialog id="confirmCancelar" message="Deseja cancelar ?"
showEffect="fade" hideEffect="fade" header="Cancelar"
severity="alert" widgetVar="confirmCancelar" appendToBody="true">
<p:commandButton value="Sim" oncomplete="confirmCancelar.hide()"
actionListener="#{dentistaMB.cancelar}" />
<p:commandButton value="Não" onclick="confirmCancelar.hide()"
type="button" />
</p:confirmDialog>
</p:dialog>
</h:form>
</ui:composition>
</h:body>
</html>
And look at my p:dataTable
<h:form id="formDentistas">
<p:growl autoUpdate="true" id="growlmessages" />
<p:dataTable rowKey="#{dentista.id}" var="dentista" value="#{dentistaMB.dentistas}"
paginator="true" emptyMessage="Não foi encontrado nenhum registro"
rows="10" id="dataTableDentistas"
selection="#{dentistaMB.selectedDentista}" selectionMode="single">
<f:facet name="header">Lista de Dentistas</f:facet>
<p:column headerText="Nome" sortBy="nome" filterBy="nome" id="nome"
width="200px">
#{dentista.pessoaFisica.nome}
</p:column>
<p:column headerText="Data Nascimento" sortBy="dataNascimento"
filterBy="dataNascimento" id="dataNascimento" width="60px">
#{dentista.pessoaFisica.dataNascimento}
</p:column>
<p:column headerText="CRO" sortBy="cro" filterBy="cro" id="cro"
width="60px">
#{dentista.cro}
</p:column>
<f:facet name="footer">
<div class="align_text_left">
<p:commandButton icon="ui-icon-plus" value="Novo" id="cadastrar"
oncomplete="dialogCadastrar.show()" />
<p:column headerText="Ações" style="width:50px;">
<p:commandButton value="Alterar" icon="ui-icon-pencil" />
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
</p:column>
</div>
</f:facet>
</p:dataTable>
</h:form>
So, what's the correct form to update the p:dataTable after a change in an entity? This example above is about an insert, but remove doesn't work either. I used the following code:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
in your dialog you must add an ajax event to fire update of form like:
<p:ajax event="close" listener="#{dentistaMB.load}"
update=":formDentistas" immediate="true" global="false" />
this will allow you to reload your table feed lists.
in your load method you need to update (refetch data from db) dentistas list. If you are using filtering do not forget to update your filtering list as well.
In managedbean load function you can use:
public void load(){
dentistas.clear();
filteredDentistas.clear();
dentistas.addAll(getDentistService().getDentists());
filteredDentistas.addAll(getDentistService().getDentists());
}
Trying to do some simple primefaces datatable ajax work and get the following exception:
javax.servlet.ServletException: /default.xhtml #17,76 Parent not an instance of ClientBehaviorHolder: org.primefaces.component.datatable.DataTable#5fdb7adc
I'm using primefaces 3.3.1. My .xhtml code is here (I copied some of it from the primefaces site to see if I could get this working), anybody got any ideas?
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" >
<h:head>
</h:head>
<h:body>
<center>
<h:form id="form">
<p:dataTable id="personTable" var="client" value="#{tableBean.persons}"
selection="#{tableBean.person}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onUserSelect}"
update=":form:displayf" oncomplete="carDialog.show()" />
<p:ajax event="rowUnselect"
listener="#{tableBean.onUserUnselect}"
update=":form:displayf" />
<f:facet name="header">
Click "View" button after selecting a row to see details
</f:facet>
<p:column headerText="Name">
#{client.name}
</p:column>
<p:column headerText="Address">
#{client.address}
</p:column>
<p:column headerText="Phone" >
#{client.phone}
</p:column>
</p:dataTable>
<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog" resizable="false"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="displayf" columns="2" cellpadding="4">
<h:outputText value="Name:" />
<h:outputText value="#{tableBean.person.name}" />
<h:outputText value="Address:" />
<h:outputText value="#{tableBean.person.address}" />
<h:outputText value="Phone:" />
<h:outputText value="#{tableBean.person.phone}" />
</h:panelGrid>
</p:dialog>
</h:form>
</center>
</h:body>
</html>