PrimeFaces datatable fails sorting with active filter - jsf

PrimeFaces Version: 6.0
In my data table I can sort and filter columns but not both at the same time.
Following scenario:
Column1 Column2
http://someurl.com 1
http://anotherurl.com 5
When I enter a value into the Column1 filter. Only the filtered rows are visible. Now when I click on sort of Column1 I get the following result:
Column1 Column2
0
0
Column2 is mapped to a primitive value, that explains the zero value.
As a workaround I have added:
<p:ajax event="sort" onstart="PF('mytableWidget').filter();"/>
But I can still see the above empty result for some milliseconds, before the filter() function is executed.
<p:dataTable id="mytable" widgetVar="mytableWidget" value="#{bean.data}" var="item">
<p:column headerText="Column1" sortBy="#{item.column1}" filterBy="#{item.column1}" filterMatchMode="contains">
#{item.column1}
</p:column>
<p:column headerText="Column2" sortBy="#{item.column2}">
#{item.column2}
</p:column>
bean.data is mapped to an ArrayList<MyDataHolder>.
import lombok.Data;
import lombok.EqualsAndHashCode;
#Data
#EqualsAndHashCode(of = "column1")
public class MyDataHolder {
String column1;
int column2;
}

It seems to me you must make MyDataHolder serializable;
public class MyDataHolder implements Serializable
My best bet for an elaboration is the same as here (the same applies to ViewScoped beans). ViewScoped (and broader scoped) beans must be serializable, and therefore all their attributes must be the same.

Related

PrimeFaces dataTable convert values for showing in a view

I have a question based in the following situation.
I have a backing bean that create a matrix with ints, in rows, columns and cells (tablaBean). I have no problem displaying it in a jsf view. Each one of those ints, it´s an ID of differents objects. How can I do, if I want to show in my JSF view, instead of ints, some attributes of the objects?
This is my dataTable:
<p:dataTable var="rowName" value="#{tablaBean.rowNames}" rowIndexVar="rowIdx">
<p:column headerText="Alumnos:">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns var="colName" value="#{tablaBean.colNames}"
headerText="#{colName}" columnIndexVar="colIdx">
<p:panel>
<h:outputText value="#{tablaBean.data2D[rowIdx][colIdx]}"/>
</p:panel>
</p:columns>
</p:dataTable>
So for example:
tablaBean.data2D[1][1]=3
But I don´t want to show the number "3" in my view.
I want to take that number and show the Person.name of my object Person.id=3;
Hope my question is clear enough.
Create in your backing bean method returning person name:
public String getPersonNameById(int idPerson) {
return myDao.findPersonById(idPerson).getName();
}
Use it in xhtml:
<h:outputText value="#{tableBean.getPersonNameById(tablaBean.data2D[rowIdx][colIdx])}"/>

Primefaces datatable dynamic object[]

I want to create a dynamic Primefaces datatable from the result of an sql query that gives me a List<Object[]> as result. The corresponding column names are stored in a List<String>.
The columns and the length of the Object[] field should be dynamic.
How to deal with the List<Object[]> in the Datatable?
Use <p:columns>. See also PrimeFaces <p:dataTable> showcase - dymamic columns.
Provided that you actually mean that you've the data in a List<Object[]> and the columnNames in the same order in List<String>, then this should do:
<p:dataTable value="#{bean.data}" var="item">
<p:columns value="#{bean.columnNames}" var="columnName" columnIndexVar="i">
<f:facet name="header">#{columnName}</f:facet>
#{item[i]}
</p:columns>
</p:dataTable>

JSF / PrimeFaces selecting two rows from two p:dataTables arranged in a master-detail fashion fails with Request Scope

I stumbled upon a JSF / PrimeFaces problem and although I managed to get it working by changing the scope of the backing bean I would still like to understand why it failed in the first case. So, here's a narrowed-down example that reproduces the behavior:
We have a dead simple xhtml page that displays two p:dataTables in a form, one below the other. The top p:dataTable displays numbers and the second their divisors. So we have a classical master-detail view. A button allows us to update the page so when a new number is selected from the top table we can view its divisors on the bottom table:
<h:form id="NUMBERS-form">
<p:dataTable id="dt1" var="item" value="#{numbersController.divisorSets}"
rowKey="#{item}" rows="10" selection="#{numbersController.selectedDivisorSet}"
selectionMode="single">
<p:column>
#{item}
</p:column>
</p:dataTable>
<p:dataTable id="dt2" var="item" value="#{numbersController.divisors}"
rowKey="#{item}" rows="10" selection="#{numbersController.selectedDivisor}"
selectionMode="single">
<p:column id>
#{item}
</p:column>
</p:dataTable>
<p:commandButton id="Update" ajax="true" update=":NUMBERS-form"
action="#{numbersController.foo}" value="update"/>
</h:form>
The backing bean defines two read-only collections: one for the DivisorSets (i.e. the numbers whose divisors we want to find) and another one for the divisors of currently selected number. It also has two fields and property getters/setters for the currently selected number and the currently selected divisor of that number:
#ManagedBean
#ViewScoped // if this is toggled to #RequestScoped it stops working
public class NumbersController implements Serializable {
private static final Logger l = Logger.getLogger(NumbersController.class.getName());
public List<DivisorSet> getDivisorSets() {
List<DivisorSet> retValue = new ArrayList<DivisorSet>();
for (int i = 10 ; i < 20 ; i++)
retValue.add( new DivisorSet(i) );
return retValue;
}
public List<Integer> getDivisors() {
if (selectedDivisorSet != null)
return selectedDivisorSet.getDivisors();
else return null;
}
private DivisorSet selectedDivisorSet;
// getter and setter ...
private Integer selectedDivisor;
// getter and setter ...
public String foo() { return null; }
}
When the page first loads, only the top p:dataTable is populated. When a row of the top table is selected and the p:commandButton pressed, the divisors of that number are fetched on the bottom p:dataTable. So far so good. Here comes the problem: when a row is selected from the top table and a row also selected from the bottom table and the p:commandButton pressed, the logging messages I have in the setters reveal that:
when the scope of the backing bean is set to View both selected numbers are set correctly in the update model values phase
when the scope of the backing bean is set to Request only the selected number from the top table is set correctly, the setter for the selectedDivisor field (that is linked with the bottom p:dataTable) carries a value of 0 (or null in other examples I've tried with different classes used).
Note that there is no business logic in this trivial example to make it necessary to select a number from the bottom p:dataTable - this is just a narrowed-down version of the same problem I had in a real context. Can anybody explain the steps in the JSF lifecycle that result in the bottom table selected value not set properly when view is RequestScoped (as opposed to ViewScoped that succeeds)?

How to save h:inputText values of a h:dataTable? My attempt only saves the value of last row

I'm having trouble making a dataTable where each row has a inputText and a commandLink. When the link is clicked, only it's row's inputText's data is submitted.
Something like this?
<h:dataTable value="#{bean.items}" var="item">
<h:column>
<h:inputText value="#{bean.value}"/>
</h:column>
<h:column>
<h:commandLink action="#{bean.save}" value="save">
<f:setPropertyActionListener target="#{bean.item}" value="#{item}" />
</h:commandLink>
</h:column>
</h:dataTable>
Bean:
#RequestScoped
public class Bean {
private Item item;
private String value;
Right now, as it is, it's using the last row's inputText to fill the value. I wrapped another h:form, but it broke other things and I've learned that nested h:form is not the right way to do it hehe
What's the correct way to do this?
Thanks.
You're binding the value of all HTML input elements to one and same bean property. This is of course not going to work if all those HTML input elements are inside the same form. All values are subsequently set on the very same property in the order as the inputs appeared in the form. That's why you end up with the last value. You'd like to move that form to inside the <h:column> (move; thus don't add/nest another one).
The usual approach, however, would be to just bind the input field to the iterated object.
<h:inputText value="#{item.value}"/>
An alternative, if you really need to have your form around the table, is to have a Map<K, V> as bean property where K represents the type of the unique identifier of the object behind #{item} and V represents the type of value. Let's assume that it's Long and String:
private Map<Long, String> transferredValues = new HashMap<Long, String>();
// +getter (no setter necessary)
with
<h:inputText ... value="#{bean.values[item.id]}" />
This way you can get it in the action method as follows:
String value = values.get(item.getId());
By the way, if you happen to target Servlet 3.0 containers which supports EL 2.2 (Tomcat 7, Glassfish 3, etc), then you can also just pass the #{req} as a method argument without the need for a <f:setPropertyActionListener>.
<h:commandLink ... action="#{bean.save(item)}" />
See also:
How and when should I load the model from database for h:dataTable
How can I pass selected row to commandLink inside dataTable?
How to dynamically add JSF components

JSF datatable row selection

How to select multiple rows in a JSF datatable?
You can either place a checkbox on each row giving it a value of #{currentRowItem.selected} or use <rich:extendedDataTable>
Create a Map<Integer, Boolean> selectMap in the backing bean. (If the key is not model's id and key is a string, create a Map with String, Boolean pair ..)
For every row provide a checkbox #{backingBean.selectMap[rowvar.selectedId]}
You must be able to find the selected values in the map after each selection.
you can use primefaces as follow:
<p:dataTable id="tableId" var="data" value="#{myBean.myList}"
selection="#{myBean.selectedDTOs}"
rowKey="#{data.objectId}">
<p:column selectionMode="multiple" />
</p:dataTable>

Resources