I am trying this example 'DataTable - Filtering'. Everything works except for the Search all fields: textbox that filters. when i enter characters to it it doesn't filter as in the example.
There is no errors or exceptions thrown. I don't undestand what onkeyup="carsTable.filter()" does in the code. can someone explain this ? and any idea why it fails to filter
<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>
carsTable is the name of the datatable. Somehow its missing from the example, but the p:dataTable should have an attribute widgetVar="carsTable". onkeyup is the event that is firedafter you released a key. It tells the carsTable to filter after you entered a new character.
So add the widgetVar="carsTable" attribute to p:dataTable and you are good to go.
If you have a look at the PrimeFaces userguide, you will find the correct example.
Related
Assume we have the following JSP code:
<c:forTokens items="${someBean.aStringOfIntNumbersSeparatedBySemicolons}"
delims=";"
var="item"
varStatus="stat">
${item}
<c:if test="${!stat.last}">;</c:if>
<c:if test="${stat.count %5 == 0}">
<br/>
</c:if>
</c:forTokens>
Of which the output is rendered in rows with 5 columns each, like so:
How can I possibly do this with the JSF or Primefaces tags?
There is no direct equivalent, you should transform your token into a list in the managed bean and consume the list in the framework components.
List<String> tokens = Arrays.asList("car1,car2,car3,car4".split(","));
For such simple scenario you might not need the primefaces components. When you go for a Object Oriented model, you can take advantage of PF components to iterate through the list and present its fields using data binding. For instance:
DataList - For each Car type in the cars1 list, a line will be added in the list.
<p:dataList value="#{dataListView.cars1}" var="car" type="ordered">
<f:facet name="header">
Basic
</f:facet>
#{car.brand}, #{car.year}
</p:dataList>
DataTable - For each car in cars list, a row is added to the table component.
<p:dataTable var="car" value="#{dtBasicView.cars}">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
Using such component framework you might speed your development focusing on the business logic instead of UI design.
The only working solution I've found
For now, the only working solution I've found lies partly in the JSF and partly in the back-end code:
Edit the back-end code so that it adds a <br/> after every fifth element of that String field aStringOfIntNumbersSeparatedBySemicolons.
Add escape="false" to the <h:outputText> tag that holds the data on the front end. (The default value is escape="true", which renders <br/> as <br/>)
I'm using a Primefaces columnToggler to dynamically hide/display columns in a data table. This is working as expected, however I would like to remove items from the togglers checklist, so the user cannot check/uncheck them.
relevant code:
button and columnToggler
<p:commandButton id="toggler"
type="button"
value="Columns"
title="Show/Hide columns"/>
<p:columnToggler datasource="my_datatable"
trigger="toggler" />
dataTable
<p:dataTable value="#{bean.foobars}" var="fb"
id="my_datatable"> ...
column to show (working as expected)
<p:column headerText="Data One" >
<h:outputText value="#{fb.data1}"/>
</p:column>
column to hide from columnToggler checklist (how do I do this?)
<p:column headerText="Always Available" >
<h:outputText value="#{fb.mustSeeField}"/>
</p:column>
I was hoping to find an attribute on p:columnToggler for 'locked' or 'always on' fields, or possibly an attribute on p:column to remove it from the columnToggler checklist. Unfortunately I'm not sure how to do this, or if it's possible. Thoughts? Solutions? thank you!
PrimeFaces has a toggleable attribute on the p:column as can be seen in the PrimeFaces 6.1 documentation on page 110. So
<p:column headerText="Always Available" toggleable="false">
<h:outputText value="#{fb.mustSeeField}"/>
</p:column>
Should do the trick
I am trying to filter a datatable by adding the following code:
<p:dataTable value="#{hoofdschermBean.onderzoekers}" widgetVar="onderzoekerTable" var="onderzoekeritem" rendered="#{not empty hoofdschermBean.onderzoekers}" rowStyleClass="tablerow" draggableColumns="true">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Zoeken:" />
<p:inputText id="globalFilter" onkeyup="PF('onderzoekerTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
However it does not filter when I fill something in this textbox, it says no records found.
If I add filterBy on a column, only than this textbox can filter on the column variable. What am I doing wrong here?
(P.S. I do not want to have filter functions on every separate column, that is why I wanted this facet only!)
#Edit 14:32 27-11-2014
I have also tried to use
filteredValue="#{hoofdschermBean.gefilterdeOnderzoekers}"
and to use ViewScoped and SessionScoped.
Do you have a List<> field in your managedBean so the filtered values can be saved somewhere? Also, you'd need to reference this value with a filteredValue="#{hoofdschermBean.filtered...}"attribute in your dataTable-Tag.
(Like in the PrimeFaces ShowCase, where they have a List<Car> filteredCars; in their managedBean)
Also, it might be helpful to check the scope of your ManagedBean
I'm using an extendedDataTable because I need multiselect. The table can get pretty large, so I'm using a dataScroller for paging.
What I want to achieve is, that the selection is cleared when switching to another page. The selection is stored in the backing bean and I have a method clearTableSelection to clear the selection.
Now my question is, how is it possible to call the method clearTableSelection when switching pages.
I found a simple solution:
...
<rich:extendedDataTable>
...
<f:facet name="footer">
<rich:dataScroller
onbegin="document.getElementById('form:hiddenButton').click()" />
</f:facet>
</rich:extendedDataTable>
<a4j:commandButton
id="hiddenButton" action="#{backingBean.clearTableSelection}"
value="HiddenButton" execute="#this" style="display: none;" />
...
I have a data table with a variable number of columns and a data scroller. How can I enable server side sorting? I prefer that it be fired by the user clicking the column header.
<rich:datascroller for="instanceList" actionListener="#{pageDataModel.pageChange}"/>
<rich:dataTable id="instanceList" rows="10" value="#{pageDataModel}"
var="fieldValues" rowKeyVar="rowKey">
<rich:columns value="#{pageDataModel.columnNames}" var="column" index="idx">
<f:facet name="header">
<h:outputText value="#{column}"/>
</f:facet>
<h:outputText value="#{classFieldValues[idx]}" />
</rich:columns>
</rich:dataTable>
I already have a method on the bean for executing the sort.
public void sort(int column)
I ended up doing it manually. I adding a support tag to the header text tag, like so.
<h:outputText value="#{column}">
<a4j:support event="onclick" action="#{pageDataModel.sort(idx)}"
eventsQueue="instancesQueue"
reRender="instanceList,instanceListScroller"/>
</h:outputText>
To get the ascending/descending arrows, I added a css class.
<h:outputText value="#{column}" styleClass="#{pageDataModel.getOrderClass(idx)}" >
<a4j:support event="onclick" action="#{pageDataModel.sort(idx)}"
eventsQueue="instancesQueue"
reRender="instanceList,instanceListScroller"/>
</h:outputText>
There is a fairly elegant solution to this solution here:
http://livedemo.exadel.com/richfaces-demo/richfaces/sortingFeature.jsf?tab=ex-usage
This demo avoids using the tag.
Your datamodel needs to implement "Modifiable" interface.
The datatable will call it's modify() method to do serverside
sorting and filtering.
Have a look at the "sortBy" property of "rich:columns", maybe that's what you're looking for.
Richfaces Reference
Cant you just use Collection.sort() when you retrieve the List?