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
Related
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>
I've made globalFilter in the header of dataTable and then added sorting to columns. But there is a problem: the columns becoming sortable after the first time I use the filter.
So when the program starts user need to clear already empty filter control and after that can sort data in the table.
Please,could someone recommend me how to solve the problem?
I've made filter like in example on PrimeFaces showcase.
<p:dataTable id="dtParkType"
widgetVar="w_dtParkType"
var="parkTypeWeb"
value="#{parkTypeHolder.data}"
selectionMode= "single"
selection="#{parkTypeController.selectedItem}"
rowKey="#{parkTypeWeb.id}"
emptyMessage="#{msg['common.NoValue']}"
rowStyleClass="#{parkTypeWeb.isDeleted? 'colored' : null}"
filteredValue="#{parkTypeController.filteredData}"
scrollable="true"
scrollRows="27"
paginator="true"
rows="27"
resizableColumns="true">
<f:facet name="header">
<div align="right">
<p:outputPanel>
<h:outputText value="#{msg['edit.Search']}"/>
<p:inputText id="globalFilter"
onkeyup="PF('w_dtParkType').filter()"
style="width:150px;margin-left:5px;"
placeholder="#{msg['common.PlaceHolder.KeyWord']}"/>
</p:outputPanel>
</div>
</f:facet>
<p:ajax event="rowSelect"
listener="#{parkTypeController.onRowSelect}"
update=":rightForm:panelbtnParkType"/>
<p:ajax event="rowDblselect"
listener="#{parkTypeController.callEditForm}"
update=":formEditParkType:pnlEditParkType"/>
<p:ajax event="rowUnselect" update=":rightForm:panelbtnParkType"/>
<p:column filterBy="#{parkTypeWeb.longName}"
filterMatchMode="contains"
filterStyle="display:none"
sortBy="#{parkTypeWeb.longName}">
<f:facet name="header">
<h:outputText value="#{msg['column.Title.Full']}"/>
</f:facet>
<h:outputText value="#{parkTypeWeb.longName}"/>
</p:column>
<p:column filterBy="#{parkTypeWeb.shortName}"
filterMatchMode="contains"
filterStyle="display:none"
sortBy="#{parkTypeWeb.shortName}">
<f:facet name="header">
<h:outputText value="#{msg['column.Title.Short']}"/>
</f:facet>
<h:outputText value="#{parkTypeWeb.shortName}" />
</p:column>
</p:dataTable>
I want to open a dataTable list when I click to selectBooleanButton. There is an ajax listener in selectBooleanButton but it is not entering the method on debug node. Here are the codes.
<h:form id="form">
<p:growl id="growl" showDetail="true" sticky="true" />
<h:outputText value="" />
<h3>#{res['ko.yetkiVerme.yetkiVerme.title']}</h3>
<p:dataTable id="uyeListe" var="uy" rowKey="#{uy.kullaniciadi}"
value="#{yetkiVermeBean.uyelerList}" paginator="true" rows="5"
rowsPerPageTemplate="5,10,15" paginatorPosition="bottom"
selection="#{yetkiVermeBean.selectedEntity}" selectionMode="single">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.title']}" />
</f:facet>
<p:column filterBy="#{uy.kullaniciadi}" sortBy="#{uy.kullaniciadi}"
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.userName']}" />
</f:facet>
<h:outputText value="#{uy.kullaniciadi}" />
</p:column>
<p:column filterBy="#{uy.ad}" sortBy="#{uy.ad}"
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.name']}" />
</f:facet>
<h:outputText value="#{uy.ad}" />
</p:column>
<p:column filterBy="#{uy.soyad}" sortBy="#{uy.soyad}"
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.surName']}" />
</f:facet>
<h:outputText value="#{uy.soyad}" />
</p:column>
</p:dataTable>
<p:spacer height="20" />
<p:selectBooleanButton id="viewYetkilerButton"
offLabel="#{res['ko.yetkiVerme.uyeListe.unshowAuthorize']}"
value="#{!yetkiVermeBean.isRendered}"
onIcon="#{res['ko.plusIcon']}" offIcon="#{res['ko.minusIcon']}"
onLabel="#{res['ko.yetkiVerme.uyeListe.showAuthorize']}">
<p:ajax listener="#{yetkiVermeBean.checkSelectionforYetkiVer}"
update="viewYetkilerButton"/>
</p:selectBooleanButton>
<p:outputPanel id="listePanel">
<p:dataTable id="uyeListe2" var="uy" rowKey="#{uy.kullaniciadi}"
rendered="#{yetkiVermeBean.isRendered}"
value="#{yetkiVermeBean.uyelerList}" paginator="true" rows="5"
rowsPerPageTemplate="5,10,15" paginatorPosition="bottom"
selectionMode="single">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.title']}" />
</f:facet>
<p:column filterBy="#{uy.kullaniciadi}"
sortBy="#{uy.kullaniciadi}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.userName']}" />
</f:facet>
<h:outputText value="#{uy.kullaniciadi}" />
</p:column>
<p:column filterBy="#{uy.ad}" sortBy="#{uy.ad}"
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{res['ko.yetkiVerme.uyeListe.name']}" />
</f:facet>
<h:outputText value="#{uy.ad}" />
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
</ui:define>
And this is my ajax method.
public void checkSelectionforYetkiVer() {
RequestContext context = RequestContext.getCurrentInstance();
isRendered = Boolean.TRUE;
context.update("form:listePanel");
}
What is in leave out?
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>
I would like to update a component showing data related to the info displayed in the current page of a primefaces dataTable but I couldn't find any info about intercepting ajax events like
onRowsPerPageChange or onPageChanged.
Is there any way to do that?
Using primefaces 3.0.M3 and Glassfish 3.1
Here is my table. The component I want to update is another dataTable inside the footer of the first one:
<p:dataTable id="timbrature_dt"
value="#{timbratureMBean.dataModel}"
paginator="true"
rows="12"
lazy="true"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="6,12,24"
currentPageReportTemplate="#{msgs.pagina} {currentPage} #{msgs.of} {totalPages}"
var="tdett"
widgetVar="ttable"
selection="#{timbratureMBean.selezione}"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{timbratureMBean.onRowSelect}"
update="display :timbrature_dt:giustificativi_dt"
oncomplete="timbDialog.show()" />
<f:facet name="header">
<h:panelGrid columns="1" columnClasses="columnclass-noborders">
<p:outputPanel>
<h:outputText value="#{msgs.dal}: " />
<p:calendar value="#{timbratureMBean.daData}"
pattern="dd/MM/yyyy"
locale="it"
showButtonPanel="true"
navigator="true"
mindate="01/01/2003"
maxdate="#{timbratureMBean.oggi}">
<p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}"
update="timbrature_dt :timbrature_dt:giustificativi_dt" />
</p:calendar>
<h:outputText value=" #{msgs.al}: " />
<p:calendar value="#{timbratureMBean.aData}"
pattern="dd/MM/yyyy"
locale="it"
showButtonPanel="true"
navigator="true"
mindate="01/01/2003"
maxdate="#{timbratureMBean.oggi}">
<p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}"
update="timbrature_dt :timbrature_dt:giustificativi_dt" />
</p:calendar>
</p:outputPanel>
<h:outputText value="#{msgs.timbrature}"/>
</h:panelGrid>
</f:facet>
<p:column>
<f:facet name="header">
#{msgs.data_comp}
</f:facet>
<amp:outputData value="#{tdett.sDtComp}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.data_reale}
</f:facet>
<amp:outputData value="#{tdett.sDtTimb}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.terminale}
</f:facet>
<h:outputText value="#{tdett.nrTer}"/>
</p:column>
<p:column filterBy="#{tdett.eU}" filterOptions="#{timbratureMBean.euOptionList}">
<f:facet name="header">
#{msgs.verso}
</f:facet>
<h:panelGroup>
<h:outputText value="#{msgs.entrata}" rendered="#{tdett.eU == 'E'}"/>
<h:outputText value="#{msgs.uscita}" rendered="#{tdett.eU == 'U'}"/>
</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_valida}
</f:facet>
<h:outputText value="#{tdett.oraValida}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_reale}
</f:facet>
<h:outputText value="#{tdett.oraReale}"/>
</p:column>
<f:facet name="footer">
<p:dataTable id="giustificativi_dt"
value="#{timbratureMBean.dataList}"
var="gius"
widgetVar="gtable">
<f:facet name="header">
<h:panelGrid columns="1" columnClasses="columnclass-noborders">
<h:outputText value="#{msgs.giustificativi}"/>
</h:panelGrid>
</f:facet>
<p:column>
<f:facet name="header">
#{msgs.voce}
</f:facet>
<h:outputText value="#{gius.voce}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.dal}
</f:facet>
<amp:outputData value="#{gius.sDtIGius}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.al}
</f:facet>
<amp:outputData value="#{gius.sDtFGius}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_giorni}
</f:facet>
<h:outputText value="#{gius.nrGiorni}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_inizio}
</f:facet>
<amp:outputNvl value="#{gius.oraIGius}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_fine}
</f:facet>
<amp:outputNvl value="#{gius.oraFGius}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_ore}
</f:facet>
<amp:outputNvl value="#{gius.nrOre}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_minuti}
</f:facet>
<amp:outputNvl value="#{gius.nrMinuti}" nullval="-"/>
</p:column>
</p:dataTable>
</f:facet>
</p:dataTable>
<p:dialog header="Info" widgetVar="timbDialog" resizable="false"
width="200" showEffect="clip" hideEffect="clip">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Data:" style="font-weight: bold"/>
<amp:outputData value="#{timbratureMBean.selezione.sDtComp}" />
<h:outputText value="Pausa pranzo ridotta: " style="font-weight: bold"/>
<h:outputText value="#{timbratureMBean.gestPausaPranzo}" />
<h:outputText value="Timbratura non allineata: " style="font-weight: bold"/>
<h:outputText value="#{timbratureMBean.timbNonAllineate}" />
</h:panelGrid>
</p:dialog>
Hou,
there is an event for changing a page, see here
http://cagataycivici.wordpress.com/2011/06/10/datatable-hooks/
<p:datatable paginator="true" rows="10" value="#{bean.items}" var="item">
<p:ajax event="page" listener="#{bean.onPaginate}" update="othercomponents" oncomplete="alert('done')"... />
...
though I am still looking for an event for onChangeRows
but, my current problem is only storing user choices, in fact that page event solves storing both on what page I am and how many rows are selected. If onPaginate implements in this way:
public void onPaginate(PageEvent event){
logger.info("I am on page:"+event.getPage());
logger.info("Rows per page set:"+((org.primefaces.component.datatable.DataTable)event.getSource()).getRows());
}
You can see what page you are on and how many rows are selected. And this event is triggered both when you change a page or change how many rows shown.
My solution is using Primefaces 5.2.x.
I found a pretty easy way to implement this, one of the problems I had with udik's solution was that when the onPaginate() method was called, it didn't have the newest selected value.
So here's what I did to make sure you always had the latest value and could save/load it to the database or a cookie or something (we save to a cookie).
<p:dataTable
.....
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}"
rowsPerPageTemplate="25,50,100"
rows="#{controller.rowsPerPage}"
.....
>
.....
<p:ajax event="page" oncomplete="rowsPerPageUpdate()" />
.....
</p:dataTable>
<p:remoteCommand name="rowsPerPageUpdate" actionListener="#{controller.onPaginate}" />
and then our controller looks like this:
#Dependent
#Named
public class TableController implements Serializable {
private String rowsPerPage = "25"; //default value
.....
public void onPaginate() {
//save to the cookie
}
.....
}
Basically the magic happens in the remoteCommand, which will fire after the ajax event to insure that controller.rowsPerPage has been properly updated.