Primefaces filter datatable - jsf

Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>

It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.

You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.

Related

Tooltip in the Column Header of a Primefaces Datatable

In an application based on JSF 2.1 and Primefaces 6.0, I am trying to add a tooltip to the header of a datatable.
In my current solution, the tooltip appears only when pointing the mouse precisely on the text title ("Projekttyp"). I need the tooltip to appear whenever the mouse pointer is in the column header. Unfortunately, it is not possible to assign an id to the facet header.
I understand that the global tooltip as described here Primefaces Showcase Tooltip can only be used in higher Versions of JSF (JSF 2.2).
Here is my code:
<p:column sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="typColumntitle"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
Add the f:facet tag like the above and it will work fine (I mean tooltip value will be displayed); if you hover your mouse anywhere inside the column header.
Even outside the text in the column header.
<p:column id= "keyColumnId">
<f:facet name="header">
<h:outputText value="YOUR COLUMN HEADER" />
<p:tooltip value="TOOLTIP VALUE TO SHOW" for="keyColumnId" />
</f:facet>
</p:column>
PrimeFaces supports 'jquery' selectors in the for attribute of the p:tooltip. You effectively need to select the 'parent' of the element with id typColumntitle, so this will (most likely) work.
<p:tooltip id="typTooltip"
for="#(#typColumntitle:parent)"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
Solving this problem turned out to be easy in the end. I just had to assign an id to the column <p:column id="columnwithtooltip" and adjust the for="columnwithtooltip" in the tooltip accordingly:
<p:column id="projekttypColumn" sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="projekttypColumn"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>

How to export a data table as different from the UI in JSF Primefaces?

I have a data table which I want to export as different from the UI.
For example, part of my data table is
<p:column sortBy="#{phi.patProtein}" width="130">
<f:facet name="header">
<h:outputText value="Pathogen Protein" />
</f:facet>
<h:outputText id="patProteinText" value="#{phi.patProtein}" />
<p:commandLink id="patBtn" value="[+]" type="button" />
<p:overlayPanel for="patBtn" hideEffect="fade" dynamic="true"">
<h:outputText value="#{phi.patProteinLong}"/>
</p:overlayPanel>
</p:column>
I want to export only the output text ("#{phi.patProtein}") from the column, not the command link ("[+]") and overlay panel. But Primefaces exports everything in column, and not gives me a chance to specify which fields of column to export.
How can I do this?
If you create two <p:column>s, one containing the <h:outputText> and the other one containing the <p:commandLink> and the <p:overlaypanel>, you can set the attribute "exportable" of the second column to false:
<p:column sortBy="#{phi.patProtein}" width="130">
<f:facet name="header">
<h:outputText value="Pathogen Protein" />
</f:facet>
<h:outputText id="patProteinText" value="#{phi.patProtein}" />
</p:column>
<p:column exportable="false">
<p:commandLink id="patBtn" value="[+]" type="button" />
<p:overlayPanel for="patBtn" hideEffect="fade" dynamic="true"">
<h:outputText value="#{phi.patProteinLong}"/>
</p:overlayPanel>
</p:column>
Then only the text should be exported.

Primefaces datatable row expansion exporting

I need to export datatable row expansion in primefaces but i cannot figure it out. Is there anyway to do that ?
Thanks in advance.
You can export PrimeFaces DataTable with rowExpansion data without an other Java API or you can use custom export method on ManagedBean class with Apache POI API help.
Here trick is, add the columns which to be exporting to the file and append the visible=”false” attribute to the these columns.
Then append the exportable=”false” attribute to the p:rowToggler column.
Thus, you won’t see datatable columns but you will see these columns on the exported file.
Obtained from here
<h:form id="myDtTblFrm">
<h:commandLink>
<img src="../ims/excel.png"/>
<p:dataExporter type="xlsx" target="myTbl" fileName="myExcelFile"/>
</h:commandLink>
<p:dataTable id="myTbl" var="item" value="#{myBean.list}">
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label, value" style="width: 50%">
<h:outputText value="Column Header 04" />
<h:outputText value="#{item.property04}" />
<h:outputText value="Column Header 05" />
<h:outputText value="#{item.property05}" />
</p:panelGrid>
</p:rowExpansion>
<p:column exportable="false">
<p:rowToggler />
</p:column>
<p:column headerText="Colum01">
<p:outputLabel value="#{item.property01}" />
</p:column>
<p:column headerText="Column02" visible="false" >
<p:outputLabel value="#{item.property02}" />
</p:column>
<p:column headerText="colum03" >
<p:outputLabel value="#{item.property03}" />
</p:column>
<p:column headerText="colum04" style="display: none">
<p:outputLabel value="#{item.property04}" />
</p:column>
<p:column headerText="colum05" style="display: none">
<p:outputLabel value="#{item.property05}" />
</p:column>
</p:dataTable>

JSF 2/PrimeFaces 4.0: Can a link in a row expand the row?

Given the code below (taken from the PrimeFaces ShowCase), what is the best way to change the functionality so that the text in the second column - <h:outputText value="#{car.id}" /> - acts as a link to expand/contract the row (rather than the <p:rowToggler> image)?
Not sure how easy this is/should be, but I'm pretty new to PrimeFaces and unsure of how this could be done. I've looked through the documentation and the PrimeFaces ShowCase), (and played with similar code for a few hours), but I've been unable to get it done.
ShowCase code:
<h:form>
<p:dataTable var="car" value="#{dtBasicView.cars}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{car.id}" /> <!-- This text needs to be a link that expands the row -->
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{car.id}" />
<h:outputText value="Year" />
<h:outputText value="#{car.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{car.color}" style="color:#{car.color}"/>
<h:outputText value="Price" />
<h:outputText value="$#{car.price}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
Edit - Found a simple solution, but not sure it's the most elegant. Any reason not to use this?
<p:column style="display:none !important">
<p:rowToggler />
</p:column>
<p:column>
<h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
The default PrimeFaces configuration doesn't allow for anything else than a <p:rowToggler /> to toggle a <p:rowExpansion>.
One solution could be using some custom JS functions to add/remove CSS classes on generated HTML elements.
The other solution can be found here : http://forum.primefaces.org/viewtopic.php?f=3&t=11308&p=55114#p55114. It's about modifying PrimeFaces sources to match your needs.
There is a easy way to do that. Create a link in a div and modify the class of the div with "ui-row-toggler" which you can get from rowToggler html source. e.g.
<div class="ui-row-toggler">Test</div>
The reason you can do that is because if you check the html source for primefaces row toggler, you can find it is
<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>
So the only thing you need to do is putting the same class to your customized div which has a link inside.

JSF Primefaces datatable match mode for global filter (not individual column)

What is the filter match mode for global filter (not the individual column filter which defaults to 'startsWith') and how to change it?
The reason I ask is, when I use the global filter with match mode set to 'startsWith' in all my columns, still I get values with 'contains' filter mode. See screenshot below.
I shouldn't be getting the rows other than the first row as I specified 'startsWith' in all columns.
Here is my datatable,
<h:form id="countryTable">
<p:dataTable rowKey="" value="#{countryBean.countriesList}"
var="country" selection="#{countryBean.selectedCountries}"
styleClass="data-table-style" widgetVar="countryTableWVar"
filteredValue="#{countryBean.filteredCountries}">
<f:facet name="header">
<div class="align-left">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="countryTableWVar.filter();"
style="width:150px" />
</p:outputPanel>
</div>
</f:facet>
<p:column selectionMode="multiple" style="width:2%;" />
<p:column headerText="Numeric Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="numericCode">
<h:outputText value="#{country.numericCode}"></h:outputText>
</p:column>
<p:column headerText="Alpha_2 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha2">
<h:outputText value="#{country.alpha2}"></h:outputText>
</p:column>
<p:column headerText="Alpha_3 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha3">
<h:outputText value="#{country.alpha3}"></h:outputText>
</p:column>
<p:column headerText="Name" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="name">
<h:outputText value="#{country.name}"></h:outputText>
</p:column>
</p:dataTable>
</h:form>
How to change the datatable global filter match mode?
If you look at the source code of primefaces
org.primefaces.component.datatable.feature.FilterFeature.java
At line 133 you can see primefaces uses contains method of String
if(columnValue.toLowerCase(filterLocale).contains(globalFilter)){
globalMatch = true;
}
So for now there is no way other than changing code according to your needs and building your own primefaces jar.
From Primefaces 4.0 docs:
Filter located at header is a global one applying on all fields, this is implemented by calling client
side API method called filter(), important part is to specify the id of the input text as globalFilter
which is a reserved identifier for datatable.
The use case would be:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="model" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="year" headerText="Year" footerText="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="manufacturer" headerText="Manufacturer"
filterOptions="#{carBean.manufacturerOptions}" filterMatchMode="exact">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column filterBy="color" headerText="Color" filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
It doesn't tell anything about startsWithor endsWith specific cases for global filter. It could be interesting to open a thread on the issue tracker.

Resources