How to render p:selectOneMenu inside an editable p:dataTable - jsf-2

I would like to render p:selectOneMenu inside p:dataTable upon rowEditInit event. I tried update="degreeType", update=formid:editTable:degreeType but it didn't work. update="#this is not a option as it refreshes whole table and clears the edit selection. As it is a dataTable, the exact id for the element is formid:editTable:0:degreeType, 0 being row number. How should I get the current row id number and put in update field?
<p:dataTable id="editTable" value="#{bean.emp}" var="stud" disabledSelection="true" editable="true" >
<p:ajax event="rowEditInit" listener="#{bean.onRowInit}" update="degreeType"/>
<p:ajax event="rowEdit" listener="#{bean.onRowEdit}" />
<p:ajax event="rowEditCancel" listener="#{bean.onRowCancel}" />
<!-- a bunch of p:column tags -->
<p:column headerText="Degree">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{stud.degree}" /></f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{stud.degree}" style="width: 100%" >
<f:ajax event="change" listener="#{bean.degreeListener}" render="degreeType" />
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItem itemLabel="MS" itemValue="MS"/>
<f:selectItem itemLabel="BS" itemValue="BS"/>
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="DegreeType">
<p:cellEditor id="test">
<f:facet name="output"><h:outputText value="#{stud.degreeType}" /></f:facet>
<f:facet name="input">
<p:selectOneMenu id="degreeType" value="#{stud.degreeType}" rendered="true">
<f:selectItem itemLabel="Select One" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{stud.degreeTypes}"/>
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width: 30px">
<p:rowEditor />
</p:column>
</p:dataTable>

Related

p:splitButton menuitem with immediate="true" always removes last row of p:dataTable

p:splitButton menuitem for delete functionality with immediate="true" always removes last row of data table even when middle row is deleted it always delete last row. How is this caused and how can I solve it?
The below data table is inside p:wizard and I have to validate data table field values on pressing next button of p:wizard only.
<p:dataTable id="nomineeEducation" var="education" value="#{nominee.prospective.schoolHistoryToSave}" rowIndexVar="status"
rendered="#{fn:length(nominee.prospective.schoolHistoryToSave) > 0}">
<p:column headerText="School" width="250">
<p:selectOneMenu value="#{education.lookupSchoolId}" required="true"
requiredMessage="Education# #{status+1}: Please select School.">
<f:selectItem itemLabel="--School--" itemValue="#{null}" />
<f:selectItems value="#{selectItemList.schoolList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Degree Obtained" width="250">
<p:selectOneMenu value="#{education.schoolAffiliations[0].educationId}" required="true"
requiredMessage="Education# #{status+1}: Please select Degree Obtained.">
<f:selectItem itemLabel="--Degree--" itemValue="#{null}" />
<f:selectItems value="#{selectItemList.educationList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Dates Attended" width="150">
<p:selectOneMenu value="#{education.underGradMonth}" required="true"
requiredMessage="Education# #{status+1}: Please select Degree Month.">
<f:selectItem itemLabel="--Month--" itemValue="#{null}" />
<f:selectItems value="#{selectItemList.monthList}" />
</p:selectOneMenu>
<p:selectOneMenu value="#{education.underGradYear}" required="true"
requiredMessage="Education# #{status+1}: Please select Degree Year.">
<f:selectItem itemLabel="--Year--" itemValue="#{null}" />
<f:selectItems value="#{selectItemList.yearList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Action" width="150">
<p:splitButton value="Select">
<p:menuitem value="Delete" action="#{nominee.deleteEducation(education, false)}" update="nomineeEducation" icon="ui-icon-close" immediate="true"/>
<p:menuitem value="Add New" action="#{nominee.addEducation(false)}" update="nomineeEducation" icon="ui-icon-plus"
rendered="#{fn:length(nominee.prospective.schoolHistoryToSave) eq (status+1)}" />
</p:splitButton>
</p:column>
</p:dataTable>
As said on http://forum.primefaces.org/viewtopic.php?f=3&t=38506, you cannot send data to backing bean if you use immediate="true".
A workaround would be to change your splitButton code for something like:
<p:splitButton value="Select">
<p:menuitem value="Delete"
action="#{nominee.deleteEducation(education, false)}"
update="nomineeEducation"
icon="ui-icon-close"
process="#this"
global="false"
/>
<p:menuitem value="Add New"
action="#{nominee.addEducation(false)}"
update="nomineeEducation"
icon="ui-icon-plus"
rendered="#{fn:length(nominee.prospective.schoolHistoryToSave) eq (status+1)}"
/>
</p:splitButton>

Show a confirm message before <p:rowEditor> updates the model on click of "OK" button

I'm using <p:rowEditor> as follows:
<p:column headerText="Libellé">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{lot.libelle}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{lot.libelle}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
I would like to show a confirm message before the <p:rowEditor> updates the model on click of the "OK" button. How can I achieve this?
You can use onstart attribute of <p:ajax event="rowEdit"> for this.
<p:dataTable ...>
<p:ajax event="rowEdit" onstart="return confirm('Are you sure?')" />
...
</p:dataTable>

To uncheck all checkboxes of primefaces datatable on click of command button

I have a editable primefaces datatable with checkboxes as one of the column.Is there any way to uncheck all checked checkboxes on click of the command button.
My JSF page code snippet.
<h:form id="form">
<h:selectOneMenu id="workspaceOptions"
value="#{tableBean.selectedItem}" class="selectMenu">
<f:selectItem id="item1" itemLabel="Select" itemValue="#{null}" />
<f:selectItem id="item2" itemLabel="Assignments"
itemValue="assignment" />
<f:selectItem id="item3" itemLabel="Preview" itemValue="2" />
<f:selectItem id="item4" itemLabel="Print" itemValue="3" />
<f:selectItem id="item5" itemLabel="Refresh" itemValue="4" />
<f:selectItem id="item6" itemLabel="Clear checkmarks" itemValue="5" />
</h:selectOneMenu>
<h:commandButton value="GO" class="commandButton"
action="#{tableBean.submit}" />
<br />
<br />
<br />
<p:dataTable id="multiCars" var="car"
value="#{tableBean.mediumCarsModel}"
selection="#{tableBean.selectedCars}" editable="true" editMode="cell">
<f:facet name="header">
Checkbox Based Selection
</f:facet>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}"
update=":form:messages" />
<p:column headerText="Model" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.model}"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column selectionMode="multiple" style="width:2%;align:middle">
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
</p:column>
<p:column headerText="Manufacturer" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.manufacturer}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.manufacturer}" style="width:96%"
label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.color}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.color}" style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View"
icon="ui-icon-search" action="#{tableBean.getSelection}" />
</f:facet>
</p:dataTable>
</h:form>
I am ok with handling of this functionality at either client side or server side.
If you want to use a separate button, then you can call the Javascript method provided in the PrimeFaces documentation.
unselectAllRows() - Unselects all rows.
You would do this by providing your DataTable a widgetVar:
<p:dataTable id="multiCars" widgetVar="multiCars" ... >
then calling it from a commandButton of type "button" (for client-side processing):
<p:commandButton type="button" value="Deselect All"
onclick="multiCars.unselectAllRows();" />
That said, why don't you just use a select all/deselect all option provided by the framework? If you remove the header facet of your selectionmode="multiple" column, then it will display a checkbox allowing you to select or deselect all.
So instead of
<p:column selectionMode="multiple" style="width:2%;align:middle">
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
</p:column>
Use this (I removed the align:middle CSS attribute because it doesn't do anything):
<p:column selectionMode="multiple" style="width:2%" />

primefaces autocomplete works fine outside datatable but not working inside it

I have this autocomplete component below that works outside the datatable but it doesn't work inside it
I don't see the cause :
<p:dataTable id="table" var="car" editable="true" editMode="cell"
widgetVar="carsTable" rowKey="#{car.idarticleFourniseur}"
value="#{articlesMB.listarticlefournisseurs}" rows="3">
<p:ajax event="cellEdit" listener="#{articlesMB.onCellEdit}"
update=":messages" />
<p:column headerText="Id">
<h:outputText value="#{car.idarticleFourniseur}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.libelle}" />
</p:column>
<p:column headerText="Fournisseur">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.fournisseur.personne.nom}" />
</f:facet>
<f:facet name="input">
<p:autoComplete id="dfdd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}"
forceSelection="true" converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:autoComplete id="dfd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}" forceSelection="true"
converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
the second autocomplete works fine, but the first (in datatable) doesn't work (the completion does not appear)
do you have any idea
thank you in advance
Instead of celleditor you can use inplace
<p:inplace editor="true" label="#{contactRole.userDto.fullContactData}" emptyLabel="#{msgs['constructionSite.text.contact']}">
<p:autoComplete value="#{contactRole.userDto}"
id="contact1" completeMethod="#{assignContactBean.completeContacts}"
var="c" itemLabel="#{c.fullContactData}" itemValue="#{c}"
converter="#{assignContactBean}" forceSelection="true" scrollHeight="200"/>
</p:inplace>

Updating a dynamic generated selectOneMenu

In my web app i have the following DataTable:
<!-- Exibição da lista de públicos -->
<p:dataTable id="dtEventos"
value="#{relatoriosBean.listaEventos}"
paginator="true" rows="5"
rowsPerPageTemplate="5,10"
paginatorPosition="bottom"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
var="atual"
emptyMessage="Não há eventos para exibição"
rendered="#{relatoriosBean.exibirPainelDados}">
<f:facet name="header">
Eventos
</f:facet>
<p:column sortBy="#{atual.nmeEvento}" styleClass="wrap">
<f:facet name="header">
Nome
</f:facet>
<p:panelGrid columns="1"
styleClass="gridNoLine">
<h:outputLabel id="olViewNomeEvento"
value="#{atual.nmeEvento}"
styleClass="t2"/>
<p:separator title="Descrição do evento"/>
<p:row>
<h:outputLabel value="Início: " styleClass="t2"/>
<h:outputLabel value="#{atual.dtaInicioEvento}"/>
<h:outputLabel value="Término: " styleClass="t2"/>
<h:outputLabel value="#{atual.dtaTerminoEvento}"/>
</p:row>
<h:outputLabel value="#{atual.dscEvento}"
styleClass="wrap"/>
</p:panelGrid>
</p:column>
<p:column>
<f:facet name="header">
Relatórios
</f:facet>
<p:panelGrid columns="2" styleClass="gridNoLine">
<p:selectOneMenu value="#{relatoriosBean.tipoEventoRelatorioSelecionado}"
required="true"
requiredMessage="Selecione o relatório a ser gerado."
effect="fade">
<f:selectItem itemLabel="Selecione um item..." itemValue=""/>
<f:selectItems value="#{relatoriosBean.tiposEventoRelatorios}">
</f:selectItems>
</p:selectOneMenu>
<p:commandButton icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update="UPDATE THE SELECTONEMENU OF THE LINE">
<f:setPropertyActionListener value="#{atual.idtEvento}"
target="#{relatoriosBean.idEventoSelecionado}}"/>
</p:commandButton>
</p:panelGrid>
</p:column>
</p:dataTable>
As you can see, inside one of the datatable columns i have a selectOneMenu. In the same column i have a button with a actionListener setted. Well, what i want is: Update the selectOneMenu of the column based on the click of the commandButton. There is a way to do this?
Ok! Now the f:setPropertyActionListener isn't setting the property eventoSelecionado. Here is the code:
<p:dataTable value="#{relatoriosBean.listaEventos}"
var="atual">
...
<p:column>
<f:facet name="header">
Relatórios
</f:facet>
<p:panelGrid columns="2"
styleClass="gridNoLine">
<p:selectOneMenu id="somRelatorios"
value="#{relatoriosBean.relatorioSelecionado}"
required="true"
requiredMessage="Selecione o relatório a ser gerado."
effect="fade">
<f:selectItem itemLabel="Selecione um item..." itemValue=""/>
<f:selectItems value="#{relatoriosBean.relatorios}">
</f:selectItems>
</p:selectOneMenu>
<p:commandButton id="cbGerarRelatorio"
icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update=":frmRelatorios:opPainelDados"
process="#this somRelatorios"
immediate="true">
<f:setPropertyActionListener target="#{relatoriosBean.eventoSelecionado}"
value="#{atual}"/>
</p:commandButton>
</p:panelGrid>
</p:column>
</p:dataTable>
In the gerarRelatorio action listener, the property eventoSelecionado is comming as null. What is wrong?
Sure, add this id=mySelectOne to your <p:selectOneMenu/> and on your <p:commandButton/> set the update attribute to update="mySelectOne". But to get the best results on this ajax update, I'd strongly advise you set your managed bean annotation to #ViewScoped if you haven't already done so. Your command button should look like this at the end of the update
<p:commandButton icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update="mySelectOne">

Resources