Primefaces datatable, sorting messes up submitted parameters - sorting

I have the following datatable:
<p:dataTable var="file" value="#{fileManagementController.storedFiles}"
styleClass="right-aligned" emptyMessage="No files found" id="fileTable" sortBy="#{fileManagementController.sortOrder}">
<p:column headerText="Scenario" sortBy="#{file.scenario}" id="scenario">
<h:outputText value="#{file.scenario}"/>
</p:column>
<p:column headerText="File Type" sortBy="#{file.fileType}" id="type">
<h:outputText value="#{file.fileType}"/>
</p:column>
<p:column headerText="Affiliated Month" sortBy="#{file.affiliatedMonth}" id="affiliatedMonth">
<h:outputText value="#{fileManagementController.convertAffiliationMonthForDisplayInTable(file.affiliatedMonth)}"/>
</p:column>
<p:column headerText="Creation Date" sortBy="#{file.creationDate}" id="sreationDate">
<h:outputText value="#{fileManagementController.convertDateForDisplayInTable(file.creationDate)}"/>
</p:column>
<p:column headerText="Last changed/Uploaded" sortBy="#{file.uploadDate}">
<h:outputText value="#{fileManagementController.convertTimestampForDisplayInTable(file.uploadDate)}"/>
</p:column>
<p:column headerText="Size" sortBy="#{file.sizeInByte}">
<h:outputText value="#{fileManagementController.roundToOneDecimal(file.sizeInByte/1024)} kB"/>
</p:column>
<p:column headerText="Actions" styleClass="centered">
<p:commandButton icon="ui-icon-pencil" action="#{fileManagementController.editFileContent(file)}" alt="Edit" title="Edit"/>
<p:commandButton icon="ui-icon-closethick" action="#{fileManagementController.archiveFile(file.fullPath)}"
update="manageFilesForm:fileTable, growl" alt="Delete" title="Delete"/>
</p:column>
</p:dataTable>
and the corresponding method in the controller:
public List<SortMeta> getSortOrder() {
UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
DataTable table = (DataTable) view.findComponent(":manageFilesForm:fileTable");
List<SortMeta> preSortOrder = new ArrayList();
SortMeta sm1 = createSortMeta(table, 0, "scenario");
SortMeta sm2 = createSortMeta(table, 1, "type");
SortMeta sm3 = createSortMeta(table, 2, "affiliatedMonth");
preSortOrder.add(sm1);
preSortOrder.add(sm2);
preSortOrder.add(sm3);
LOG.debug("Created sortOrder for File Table; ordered by {} and {}", sm1.getSortField(), sm2.getSortField());
return preSortOrder;
}
The sorting itself works, but when I vreate the sortorder, the button:
<p:commandButton icon="ui-icon-closethick" action="#{fileManagementController.archiveFile(file.fullPath)}"
update="manageFilesForm:fileTable, growl" alt="Delete" title="Delete"/>
submits a wrong path, I can't see a pattern there, it just seems to randomly submit one. I had equals() overriden, but the same behaviour occurs when I override it with all attributes considers as well as when I do not override it at all. If I do not sort the table, it works as intended. Any suggestions? Thanks in advance!

The Bean was RequestScoped. chenged it to ViewScoped, works. Thanks to #Geinmachi.

Related

Primefaces - Datatable not updated when value change

I'm working with primefaces and I'm having a problem when using p:dataTable.
<p:dataTable id="dataTable" var="label" value="#{myBean.labels}" editable="true" editMode="cell" widgetVar="dataTable" style="width: 350px;">
<p:ajax event="cellEdit" listener="#{myBean.onEdit}" update=":messages" />
<p:column headerText="Column 1" width="20">
<h:outputText id="current" value="#{myBean.currentTimeMillis}" />
</p:column>
<p:column headerText="Column 2" width="150">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{label.name}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{label.name}"/>
</f:facet>
</p:column>
</p:dataTable>
I would like that when I update the value of the second column of a row, then the value of the first column of this row is updated with a new value (currentTimeMillis).
public void public void onEdit(CellEditEvent event)
{
UIData table = (UIData) event.getComponent();
String updateClientId = table.getClientId() + ":" + table.getRowIndex() + ":current";
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add(updateClientId);
}
Although this method in being invoked the first column is not being updated. Why? It is not working only in Firefox. It works on IE and Chrome.
Thanks in advance

Unable to update p:datatable cell after ajax call on another cell's cellEdit event

In my cell edit event in my backing bean, if the cell value is changed I want to update the value of another column as well of the datatable. The value is getting correctly set in my list object but is not getting reflected in my datatable. I tried updating using the datatable using RequestContext as well, but still the list is not getting refreshed. What am I doing wrong? Should I call any row event for this change?
Code snippet :
Bean
#Named("editView")
#ViewScoped
public class EditTableView implements Serializable {
private List<Cars> carList;
private List<String> brands;
#PostConstruct
public void init() {
brands = new ArrayList<String>();
brands.add("BMW");
brands.add( "Mercedes");
brands.add("Volvo");
brands.add("Audi");
brands.add("Renault");
brands.add("Fiat");
brands.add("Volkswagen");
brands.add("Honda");
brands.add("Jaguar");
brands.add( "Ford");
brands.add("Maruti Suzuki");
carList = new ArrayList<Cars>();
modifiedList = new ArrayList<Cars>();
Cars car =new Cars();
car.setCarId(1);
car.setBrand("BMW");
car.setColor("Grey");
car.setModelNumber("2323");
car.setSelfDriven("Y");
car.setYear("1980");
car.setStatus("");
carList.add(car);
}
public void onCellEdit(CellEditEvent event) {
int rowIndex = event.getRowIndex();
Cars car = null;
LOGGER.info("Car Edited"+rowIndex);
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
DataTable carTable = (DataTable) event.getSource();
String index = carTable.getClientId(FacesContext.getCurrentInstance());
LOGGER.info(index);
if(newValue != null && !newValue.equals(oldValue)) {
LOGGER.info("Cell Changed Old: " + oldValue + ", New:" + newValue);
car=carList.get(rowIndex);
carList.get(event.getRowIndex()).setStatus("Changed");
modifiedList.add(car);
}
}
}
xhtml
<h:form id="cellEditForm">
<p:dataTable id="cars" var="car" value="#{editView.carList}"
editable="true" editMode="cell" widgetVar="cellCars">
<f:facet name="header">Cell Editing</f:facet>
<p:ajax event="cellEdit" listener="#{editView.onCellEdit}"
update=":cellEditForm:cars" />
<p:column headerText="Id">
#{car.carId}
</p:column>
<p:column headerText="Model Name" style="background-color:yellow">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.modelNumber}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.modelNumber}"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year" style="background-color:yellow">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand" style="background-color:yellow">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.brand}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.brand}" style="width:100%">
<f:selectItems value="#{editView.brands}" var="man"
itemLabel="#{man}" itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Self Driven" style="background-color:yellow">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.selfDriven}" />
</f:facet>
<f:facet name="input">
<p:inplace>
<p:inputText value="#{car.selfDriven}" />
</p:inplace>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color" style="background-color:yellow">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.color}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.color}" style="width:96%" label="Color" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<h:outputText value="#{car.status}" id="statusLabel"></h:outputText>
</p:column>
</p:dataTable>
</h:form>
I used jquery eventually. Got the index of the updated row and called jquery function from my bean.
RequestContext requestContext = RequestContext.getCurrentInstance();
String call = "updateCell(" + event.getRowIndex() + ")";
requestContext.execute(call);
Jquery code
function updateCell(i) {
var index = "cellEditForm:cars:"+i+":statusLabel";
document.getElementById(index).innerHTML="Changed";
}
OmniFaces has a great util for this, called 'Ajax'
A StackOverflow post about this shows how to use it: How to use OmniFaces Ajax.updateColumn() or Ajax.updateRow() via p:ajax
Update form not table or put table in panel and update panel.
to be safe
<h:form id="cellEditForm">
<p:panel id="something" styleclass="pero">
<p:dataTable id="cars
update="#(.pero)"
be sure to put id on panel because class update will search for that id and use it. This solution is because i don't know rest of the code and it is one that will work on any code.

Attempting to edit a datatable nested inside of an editable datatable (Ajax Error I think)

I am attempting to make a nested (Through row expansion) data table editable which is inside of another editable datatable. It appears to be having a problem with the ajax rowEdit event. When I only have one datatable as editable e.g. comment out the nested ajax tag it works. But when I try to use both It returns an error saying :
Method not found: com.aglabexpress.Admin.Billing.CompleteInvoiceController#1146df77.editInvoiceItem(javax.faces.event.AjaxBehaviorEvent)"
Is this because of the double ajax events?
How do I rectify this while keeping both tables editable?
HTMLX:
<h:form id="mainForm" >
<p:dataTable id="mainFormTable" editable="true" value="#{completeInvoiceController.labNumberBill}" var="lab" paginator="true" rows="10" rowStyleClass="#{lab.colorStatus}">
<p:ajax event="rowEdit" listener="#{completeInvoiceController.editBill}" />
<p:column>
<p:rowToggler/>
</p:column>
...
...
<p:column headerText="Date" footerText="Date">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel value="#{lab.creationDateString}" />
</f:facet>
<f:facet name="input">
<p:calendar value="#{lab.creationDate}" />
</f:facet>
</p:cellEditor>
</p:column>
...
...
<p:column headerText="Edit">
<p:rowEditor />
</p:column>
<p:rowExpansion>
<p:dataTable value="#{lab.invoiceItems}" var="item" editable="true">
<p:ajax event="rowEdit" listener="#{completeInvoiceController.editInvoiceItem}" />
...
...
<p:column headerText="Description" footerText="Description">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel value="#{item.description}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.description}" />
</f:facet>
</p:cellEditor>
</p:column>
...
...
<p:column headerText="Edit">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:rowExpansion>
Beans
public void editInvoiceItem(RowEditEvent event){
InvoiceItemConstructor itc = (InvoiceItemConstructor) event.getObject();
if(cih == null){
cih = new CompleteInvoiceHelper();
}
cih.updateItem(itc);
}
public void editBill(RowEditEvent event){
CompleteInvoiceLabNumberBill bill = (CompleteInvoiceLabNumberBill) event.getObject();
if(cih == null){
cih = new CompleteInvoiceHelper();
}
cih.updateBill(bill);
}
You need to replace your nested datatable event method signature to
public void editInvoiceItem(javax.faces.event.AjaxBehaviorEvent event)
Is this because of the double ajax events?
Yes. This is a known issue (which had been originally reported for nested p:tabView) which seems to be fixed since PrimeFaces 5.0.
You can find further information in a thread (from July 2013) of the PrimeFaces forum

Update shopping cart when change spinner value

I have a shopping cart, in my application is a Datatable. I have a spinner to show the number of that product, and I want that when spinner value changes, refresh my shopping cart, this is my code:
<p:dataTable var="carro" value="#{productoBean.productos}">
<f:facet name="header">
<h:outputText value="Carrito de la Compra" />
</f:facet>
<p:column headerText="Producto">
<h:outputText value="#{carro.producto.nombre}" />
</p:column>
<p:column headerText="Cantidad">
<p:spinner value="#{carro.cantidad}">
<p:ajax listener="#{productoBean.refreshCantidad}" update="#this" />
</p:spinner>
</p:column>
<p:column headerText="Precio/Unidad">
<h:outputText value="#{carro.producto.precioUnidad} €" />
</p:column>
<p:column headerText="Valor">
<h:outputText value="#{carro.valor} €" />
</p:column>
</p:dataTable>
I don't know how get the item which spinner change and update its values.
Please I need help, Thanks in advance.
Greetings.
Finally I did:
<p:column headerText="Cantidad">
<p:spinner value="#{carro.cantidad}" valueChangeListener="#{productoBean.updateCantidad}">
<p:ajax event="change" listener="#{productoBean.refreshCantidad(carro)}" update=":formCarrito" />
</p:spinner>
</p:column>
In productoBean.updateCantidad I have:
public void updateCantidad(ValueChangeEvent event) {
cantidad = (Integer) event.getNewValue();
}
And in productoBean.refreshCantidad(carro) as can be seen, carro is the param of the method:
public void refreshCantidad(Compra compra) {
carritoBean.addProduct(compra.getProducto(), cantidad);
}
This way I know what's the last value of the spinner and I can update my shopping cart.
Greetings.

AJAX event is only firing once in a Primefaces dataTable

I have a dataTable that gets populated with rows. On clicking on a row, the include webpage updates with new infomation. Unfortunately, the ajax event only fires once. Here's the code:
.xhtml
<h:form id="form">
<f:loadBundle basename="com.company.messages" var="msgs" />
<p:tabView id="tabView" effect="fade" effectDuration="fast">
<p:tab title="#{msgs.activeInterestPlansTab}">
<p:dataTable var="plan" value="#{interestPlanReports.activePlans}"
rowKey="#{plan.planNumber}"
selection="#{interestPlanReports.selectedPlan}"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{interestPlanReports.onRowSelect}"
update=":form:tabView:tiers" oncomplete="interestPlanPanel.show()" />
<p:ajax event="rowUnselect" listener="#{interestPlanReports.onRowUnselect}"
update=":form:tabView:tiers" oncomplete="interestPlanPanel.show()"/>
<p:column headerText="Plan Number">
#{plan.planNumber}
</p:column>
<p:column headerText="Description">
#{plan.planDescription}
</p:column>
<p:column headerText="Base Plan" >
#{plan.basePlanNumber}
</p:column>
<p:column headerText="Base">
#{plan.interestRateCodeReadable}
</p:column>
<p:column headerText="Base Rate">
<!-- #{plan.baseRatePlan} -->
TODO
</p:column>
<p:column headerText="Premium">
TODO
</p:column>
<p:column headerText="Effective Date">
<h:outputText value="#{plan.effectiveDate}" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Expiration Date">
<h:outputText value="#{plan.expirationDate}" >
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:outputText>
</p:column>
</p:dataTable>
<p:panel id="tiers" widget="interestPlanPanel">
<ui:include src="/interestplansearch/interestPlanDetail.xhtml">
<ui:param name="interestPlan" value="#{interestPlanReports.selectedPlan}"/>
</ui:include>
</p:panel>
</p:tab>
bean
public InterestPlan getSelectedPlan() {
if (selectedPlan == null)
{
selectedPlan = activePlans.get(0);
}
return selectedPlan;
}
public void setSelectedPlan(InterestPlan selectedPlan) {
this.selectedPlan = selectedPlan;
}
public void onRowSelect(SelectEvent event)
{
setSelectedPlan( (InterestPlan)event.getObject() );
}
public void onRowUnselect(UnselectEvent event) {
setSelectedPlan( (InterestPlan)event.getObject() );
}
Not sure what I'm missing. I appreciate any feedback. Thanks
UPDATE: Removing oncomplete from both rowSelect and rowUnselect fixes the issue on FireFox. However, on IE the first row select updates the panel. Any additional selects reverts to the original selection (update not row)

Resources