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.
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 have an xhtml in which I wrap two model dialogs in one form ( I wrap the whole body ). As a result when I try to submit the content on one dialog, I get validation errors from the other dialog.
When I seperate the forms for each dialog, I get warnings regarding I should wrap the whole content under one form ( or so I have interpreted ).
What is the correct way to use form tag both under this example and in general ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<f:view>
<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf8"/>
</h:head>
<h:body id="templateBody">
<h:form id="userForm" prependId="false">
<p:messages id="mymessages" autoUpdate="true" showDetail="true"/>
<h:panelGrid columns="4" id="operationBtnsGrid">
<p:commandButton value="New" icon="ui-icon-plusthick" onclick="newDialog.show();"/>
<p:commandButton value="Update" update="dataTable" icon="ui-icon-pencil"
disabled="#{userController.userModels.selectedUser.id==null}"
onclick="updateDialog.show();"/>
<p:commandButton id="Delete" value="Delete" update="dataTable" onclick="confirmation.show()"
icon="ui-icon-trash" disabled="#{userController.userModels.selectedUser.id==null}"/>
</h:panelGrid>
<p:dataTable id="dataTable"
var="user"
value="#{userController.findAll()}"
rowKey="#{user.id}"
selectionMode="single"
selection="#{userController.userModels.selectedUser}">
<f:facet name="header">
<h:outputText value="User List"/>
</f:facet>
<p:ajax event="rowSelect" update="#(form)"/>
<p:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Lastname"/>
</f:facet>
<h:outputText value="#{user.lastname}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Phone Number"/>
</f:facet>
<h:outputText value="#{user.phoneNumber}"/>
</p:column>
</p:dataTable>
<p:dialog header="Add New User" widgetVar="newDialog" modal="true">
<p:panelGrid columns="2">
<h:outputLabel for="new_name" value="Name: "/>
<p:inputText id="new_name" required="true" value="#{userController.userModels.newUser.name}"/>
<h:outputLabel for="new_lastname" value="Lastname: "/>
<p:inputText id="new_lastname" required="true" value="#{userController.userModels.newUser.lastname}"/>
<h:outputLabel for="new_phoneNumber" value="Phone number: "/>
<p:inputMask id="new_phoneNumber" value="#{userController.userModels.newUser.phoneNumber}" mask="(999) 999-9999"/>
</p:panelGrid>
<p:panelGrid columns="1">
<p:captcha label="Captcha" language="en" theme="white"/>
</p:panelGrid>
<p:commandButton id="saveNewButton" actionListener="#{userController.addNewUser}"
oncomplete="confirmation.hide()" update="#(form), #(#mymessages)" value="Save"
ajax = "false" icon="ui-icon-check"/>
</p:dialog>
<p:dialog header="Update User" widgetVar="updateDialog" modal="true">
<p:panelGrid columns="2">
<h:outputLabel for="update_name" value="Name: "/>
<p:inputText id="update_name" required="true" value="#{userController.userModels.selectedUser.name}"/>
<h:outputLabel for="update_lastname" value="Lastname: "/>
<p:inputText id="update_lastname" required="true" value="#{userController.userModels.selectedUser.lastname}"/>
<h:outputLabel for="update_phoneNumber" value="Phone number: "/>
<p:inputMask id="update_phoneNumber" value="#{userController.userModels.selectedUser.phoneNumber}" mask="(999) 999-9999"/>
</p:panelGrid>
<p:commandButton id="updateSelectedButton" actionListener="#{userController.updateUser}"
oncomplete="confirmation.hide()" update="#(form), #(#mymessages)" value="Save"
ajax = "false" icon="ui-icon-check"/>
</p:dialog>
<p:confirmDialog id="confirmDialog" message="Silmek istediğinizden emin misiniz ?"
header="Silmek için onayınız gerekiyor" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="Evet" oncomplete="confirmation.hide()"
actionListener="#{userController.deleteUser}"
ajax = "false" update="#(form), #(#mymessages)"/>
<p:commandButton id="decline" value="Hayır" onclick="confirmation.hide()" type="button"/>
</p:confirmDialog>
</h:form>
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
<f:facet name="start">
<p:graphicImage value="/images/ajax-loader.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:body>
</f:view>
</html>
When you do a form submit it submits the whole form and all ids, you have them all on the page so they fail validations.
You can either:
A) Use 'rendered' on your div blocks to hide them from the dom based on conditions, but not likely due to you wanting to have an update/new - its kind of difficult.
B) use PPR (Partial Tree Processing)
http://www.primefaces.org/showcase/ui/pprPartialTree.jsf
On your commandbutton - add 'process="update_name, update_lastname, update_phoneNumber"'
This will only submit those fields to be updated, or if you wrap them in a block with an id you can just do process="blockToUpdate"
I have a problem with my DataTable when you run the page, all rows are automatic selected. Can somebody tell me where is the problem? I haven't idea how can i fix this..
my Datatble page
<ui:composition template="../lecturerTemplates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:form id="form">
<p:growl id="messages" showDetail="true" />
<p:contextMenu for="dataTable">
<p:menuitem value="Delete" update="dataTable"
icon="ui-icon-close" actionListener="#{examMB.deleteExam}" />
</p:contextMenu>
<p:dataTable id="dataTable" var="exam" styleClass="DataTableUsers"
value="#{examMB.examList}" rows="5"
rowKey="#{examMB.exam_id}" selection="#{examMB.selectedExam}"
selectionMode="single" editable="true" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowEdit" listener="#{examMB.onEdit}"
update=":form:messages, :form:dataTable" />
<p:column sortBy="name" filterBy="name" id="name" headerText="Name">
<h:outputText value="#{exam.name}" />
</p:column>
<p:column sortBy="subject" id="subject"
headerText="Subject">
<h:outputText value="#{exam.subject}" />
</p:column>
<p:column sortBy="examStart" id="examStart"
headerText="Exam Start">
<h:outputText value="#{exam.examStart}" />
</p:column>
<p:column sortBy="examStop" id="examStop"
headerText="Exam Stop">
<h:outputText value="#{exam.examStop}" />
</p:column>
<p:column headerText="Informations">
<h:outputText value="#{exam.info}" />
</p:column>
<p:column headerText="Ratings">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{exam.ratings}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{exam.ratings}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%" headerText="Edit">
<p:rowEditor />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
I think you did not understand what 'rowKey' does.
You must specify a unique and none-null property for 'rowKey' to make selection work.
Change this
value="#{examMB.examList}" var="exam" rowKey="#{examMB.exam_id}"
to this
value="#{examMB.examList}" var="exam" rowKey="#{exam.id}"
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"
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>