checkbox button in data table - ajax

i have checkbox column in datatable, i want to have some ajax code which when i click on the checbox button on the header should check all the checkbox in the rendered data rows of the datatable. I am using primefaces, they have something out of box for this but we don't want to implement it. Please let me know if there is a easy solution using ajax.
As of now we have coded as below but we can go something better than that.
<p:dataTable id="userListTable" value="#{Bean.List}"
var="user" rowClasses="odd even"
<p:column style="width:18px">
<f:facet name="header">
<p:selectBooleanCheckbox
valueChangeListener="#{Controller.toggleCheckBox}"
partialSubmit="true" immediate="true" />
</f:facet>
<p:selectBooleanCheckbox value="#{user.disable}"
disabled="#{user.disable}"
valueChangeListener="#{circleController.enableDisableOkbutton}"
partialSubmit="true" immediate="true" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{labels['circle.userList.name']}" />
</f:facet>
<p:panelGrid styleClass="noBorders">
<p:row>
<p:column rowspan="3" style="width:60px;">
<p:graphicImage
value="#{name}.jpg"
style="width:50px;height:50px" />
</p:column>
<p:column>
<h:outputText value=" " />
<h:outputText value="#{user.firstName}" />
<h:outputText value=" " />
<h:outputText value="#{user.lastName}" />
</p:column>
</p:row>
<p:row>
<h:outputText value="#{user.country}" />
</p:row>
</p:panelGrid>
</p:column>
</p:dataTable>

Related

Primefaces TreeTable sorting freze collapse

is it possible to keep the behaviour more stable?
what I have:
an Tree table with 3 columns, first has collapsed stuff in it
if I open one and close it, then click on sort
it is open after that
what I would like to have:
keep it closed if it was closed before sort
<h:form id="form">
<p:treeTable value="#{ttBasicView.root}" var="document">
<f:facet name="header">
FritzBox Smart Home Daten
</f:facet>
<p:column headerText="Name" >
<h:outputText value="#{document.name}" />
</p:column>
<p:column headerText="Gesamtverbrauch (in kWh)" sortBy="#{document.gesamtverbrauch}" actionListener="#{BasicView.expandAll}">
<h:outputText value="#{document.gesamtverbrauch}" />
</p:column>
<p:column headerText="aktuelle Temperatur" sortBy="#{document.akttemperatur}">
<h:outputText value="#{document.akttemperatur}" />
</p:column>
<p:column style="width:24px">
<p:commandLink update=":form:documentPanel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search">
<f:setPropertyActionListener value="#{document}" target="#{ttBasicView.selectedDocument}" />
</p:commandLink>
</p:column>
</p:treeTable>
<p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true" resizable="false">
<p:outputPanel id="documentPanel">
<p:panelGrid columns="2" columnClasses="label,value" rendered="#{not empty ttBasicView.selectedDocument}">
<h:outputLabel for="name" value="Name: " />
<h:outputText id="name" value="#{ttBasicView.selectedDocument.name}" style="font-weight:bold" />
<h:outputLabel for="gesamtverbrauch" value="Gesamtverbrauch: " />
<h:outputText id="gesamtverbrauch" value="#{ttBasicView.selectedDocument.gesamtverbrauch}" style="font-weight:bold" />
<h:outputLabel for="akttemperatur" value="aktuelle Temperatur: " />
<h:outputText id="akttemperatur" value="#{ttBasicView.selectedDocument.akttemperatur}" style="font-weight:bold" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
That was my problem too.
Try it in your treeTable :
<p:ajax event="collapse"
onstart="handleLoadingStarted()"
oncomplete="handleLoadingStopped()" />

Select many checkbox ajax update view on second event

I'm trying to filter a datatable on categories using a select selectManyCheckbox.
The idea is that when a checkbox is clicked, the datatable values are updated.
Now the problem is that the values are updated after selecting a checkbox twice, but this results in a datable with incorret values.
Here is my xhtml page.
<p:layout id="dossierLayout" widgetVar="dossierLayout">
<p:layoutUnit id="categoriesLayoutUnit" position="west"
header="#{msg['dossier.page.layoutWest.header']}">
<p:selectManyCheckbox id="dossierCategories" value="#{dossierBean.dossierFileCategoriesFilter}"
layout="pageDirection" columns="1" converter="dossierCategorieConverter" immediate="true">
<f:selectItems value="#{dossierBean.dossierFileCategorieList}" var="dossierCategorie"
itemLabel="#{dossierCategorie.categorieDescription}"
itemValue="#{dossierCategorie}"/>
<p:ajax listener="#{dossierBean.filterfiles}" update="dossierForm:dossierFiles" />
</p:selectManyCheckbox>
</p:layoutUnit>
<p:layoutUnit id="dossierFilesLayoutUnit" position="center">
<p:dataTable id="dossierFiles" value="#{dossierBean.filteredFiles}" widgetVar="dossierFiles" filteredValue="#{dossierBean.filteredFiles}" var="dossierFile">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="#{msg['dossier.page.datatable.globalSearch.label']}"/>
<p:inputText id="dossierNameFilterInput" value="#{dossierBean.dossierNameFilter}"/>
<p:watermark id="dossierNameFilterInputWaterMark" for="dossierNameFilterInput" value="#{msg['dossier.page.layoutWest.header.watermark']}"/>
</p:outputPanel>
<p:commandButton id="dossierNameFilterSearch" value="#{msg['cmn.search']}" actionListener="#{dossierBean.filterFilesByName}" update="dossierFiles"/>
<p:commandButton id="dossierNameFilerSearchEmpty" value="#{msg['cmn.clear']}" actionListener="#{dossierBean.clearFilterName}" update="dossierFiles"/>
</f:facet>
<p:column id="dossierFileName" filterBy="#{dossierFile.nameDocument}" filterStyle="display: none;" filterMatchMode="contains" headerText="#{msg['dossier.page.datatable.columheader.Name']}">
<h:outputText styleClass="#{dossierFile.dossierFileIcon.docType}"/>
<h:outputText value="#{dossierFile.nameDocument}"/>
</p:column>
<p:column id="dossierFileLastChanged" headerText="#{msg['dossier.page.datatable.columheader.Date']}">
<h:outputText value="#{dossierFile.dateLastChange}"/>
</p:column>
<p:column id="dossierFileUser" headerText="#{msg['dossier.page.datatable.columheader.User']}">
<h:outputText value="#{dossierFile.user}"/>
</p:column>
<p:column id="dossierFileCategorie" headerText="#{msg['dossier.page.datatable.columheader.Categorie']}">
<h:outputText value="#{dossierFile.categorie.categorieDescription}"/>
</p:column>
<p:column id="dossierFileLocation" headerText="#{msg['dossier.page.datatable.columheader.Location']}">
<h:outputText value="#{dossierFile.nameFolder}"/>
</p:column>
</p:dataTable>
</p:layoutUnit>
</p:layout>

How to validate a List<Object> in a Primefaces dataTable - JSF

I have a dataTable for Phone something like :
<p:dataTable value="#{billingInfoBean.billingProfile.payer.phones}" var="phone" id="payerPhoneTable">
<p:column>
<f:facet name="header">
<h:outputText value="Type" />
</f:facet>
<p:selectOneMenu value="#{phone.type}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{backOfficeLookupClient.allPhoneTypes}" />
</p:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Area Code" />
</f:facet>
<h:inputText value="#{phone.areaCode}" size="3" maxlength="3" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Exchange" />
</f:facet>
<h:inputText value="#{phone.exchange}" size="3" maxlength="3" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Local" />
</f:facet>
<h:inputText value="#{phone.local}" size="4" maxlength="4" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Extension" />
</f:facet>
<h:inputText value="#{phone.extension}" size="5" maxlength="5" />
</p:column>
</p:dataTable>
I am trying to use custom validation using the object Phone. I need to call a Phone Validation service which takes these column values as inputs. Can I make use of <f:validator> here in this case?, If yes, how ?
You could attach to the dataTable a validator listener
<f:event type="postValidate" listener="#{bean.customValidation}"/>
And validate the phone object in your bean
public void customValidation(ComponentSystemEvent event) {
...
}
Then iterate through all dataTable childrens and validate each one.
Here ther's a good tutorial to start with.
This omnifaces tag solved my problem :
http://showcase.omnifaces.org/validators/validateMultiple

why does the p:dialog not submit values to bean

I have a small jsf/primefaces application with a datgrid that shows (order) items.
Now I want to add items during a dialog.
I open the dialog with a button click. - works
I want to submit the values from the dialog to the bean and update the datagrid.
If I use a default value (not from the dialog) it works. The item get shown in the datagrid and the dialog get closed. That means.
-addItem Function works
-update works
But if I want to add the values from the dialog I get a null Pointer Exception. So my values will not set in the bean.
<!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">
<p:fieldset legend="Positionen" toggleable="true" toggleSpeed="500" styleClass="mbsFieldSet">
<h:form id="form_positions">
<p:growl id="messages" showDetail="true" />
<!-- Add position mask -->
<!-- Button to open the open position mask -->
<p:commandButton id="btOpenAddPositionMask" value="Position via Dialog" onclick="dlg.show();">
</p:commandButton>
<p:dataTable var="banfPosition" value="#{banfPositionBean.lsBanfPositions}"
id="tableBanfPositions" editable="true" >
<f:facet name="header">Positionen</f:facet>
<!-- AJAX Events for editing position values -->
<p:ajax event="rowEdit" listener="#{banfPositionBean.onEdit}"
update=":form_positions:messages"/>
<p:ajax event="rowEditCancel" listener="#{banfPositionBean.onCancel}"
update=":form_positions:tableBanfPositions" />
<p:column headerText="Menge" style="width:50px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.amount}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.amount}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Matr. / Lager-Nr." style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.stockNumber}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.stockNumber}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Artikel" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.article}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.article}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Preis/Einheit" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.price}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.price}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Gesamtpreis" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.sum}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.sum}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Etat-Nr" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.etat}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.etat}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Anlagen-Nr" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{banfPosition.complex}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{banfPosition.complex}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Ändern" style="width:20px; text-align:center">
<p:rowEditor />
</p:column>
<p:column headerText="Löschen" style="width:20px; text-align:center" >
<p:commandButton id="deletePos" actionListener="#{banfPositionBean.deletePos(banfPosition)}"
update=":form_positions:tableBanfPositions" ajax="true" icon="ui-icon ui-icon-close" iconPos="center"
title="Löscht den Eintrag in dieser Zeile." />
</p:column>
</p:dataTable>
</h:form>
</p:fieldset>
<p:dialog header="Neue Position hinzufügen" widgetVar="dlg"
resizable="false">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel value="Artikel:" />
<p:selectOneMenu id="selectArticleForPosition"
value="#{banfPositionBean.selectedArticle}" var="art"
panelStyle="width:150px" style="width:260px" effect="fade"
filterMatchMode="starts" filter="true">
<f:selectItems value="#{dataBean.lsArticle}" var="article"
itemLabel="#{article.name}" itemValue="#{article}" />
<p:column>
#{art.id} - #{art.name}
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton id="btAddPosition" value="Position einfügen"
actionListener="#{banfPositionBean.addPos()}"
update=":form_positions:tableBanfPositions" oncomplete="dlg.hide();"
ajax="true" process="#all" type="submit">
</p:commandButton>
</p:dialog>
</ui:composition>
I try it with the h:form-Tag as it is shown on http://www.primefaces.org/showcase/ui/dialogForm.jsf But If I add this.
<p:dialog header="Neue Position hinzufügen" widgetVar="dlg"
resizable="false">
<h:form id="form_dialog">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel value="Artikel:" />
<p:selectOneMenu id="selectArticleForPosition"
value="#{banfPositionBean.selectedArticle}" var="art"
panelStyle="width:150px" style="width:260px" effect="fade"
filterMatchMode="starts" filter="true">
<f:selectItems value="#{dataBean.lsArticle}" var="article"
itemLabel="#{article.name}" itemValue="#{article}" />
<p:column>
#{art.id} - #{art.name}
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton id="btAddPosition" value="Position einfügen"
actionListener="#{banfPositionBean.addPos()}"
update=":form_positions:tableBanfPositions" oncomplete="dlg.hide();"
ajax="true" process="#all" type="submit">
</p:commandButton>
</h:form>
</p:dialog>
the page get reloaded but my bean will not be called either.
Do anyone have an idea what i am doing wrong?
Thanks for help.
-------------------------------------------
*EDIT*
-------------------------------------------
I try it with an p:inputText instead of an selectOneMenu an the bean gets called.
<p:dialog header="Neue Position hinzufügen" widgetVar="dlg"
resizable="false" appendToBody="true">
<h:form id="form_dialog">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="inputTxt" value="Artikel:" />
<p:inputText id="inputTxt" value="#{banfPositionBean.testStr}"></p:inputText>
</h:panelGrid>
<p:commandButton id="btAddPosition" value="Position einfügen"
actionListener="#{banfPositionBean.addPos()}"
update=":form_positions:tableBanfPositions" oncomplete="dlg.hide();">
</p:commandButton>
</h:form>
</p:dialog>
So I just need to find out why it will not work for the selectOneMenu.
First I don't know what is a type of property selectedArticle, I guess it is the same type as article (in itemValue) attribute. You should define converter or on the other hand you should bind value of selectOneMenu to be the same type as article.id, and set itemValue to #{article.id}.

primefaces datatable filtering

I use the car example from primefaces site, but it works only one time and do not refresh values after onkeyup event. Can somebody help me?:) TOM
Code which I use(from tutorial):
<p:dataTable var="car" value="#{tableBean.carsSmall}"
emptyMessage="No cars found with given criteria"
widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}"
headerText="Model" footerText="contains"
filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="#{car.year}"
headerText="Year" footerText="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.manufacturer}"
headerText="Manufacturer" footerText="exact"
filterOptions="#{tableBean.manufacturerOptions}"
filterMatchMode="exact">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column filterBy="#{car.color}"
headerText="Color" footerText="endsWith" filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
and TableBean exactly like this in tut

Resources