Conditional cell edit in PrimeFaces datatable - jsf-2

I want to allow user to edit cells in data table only if some condition is met.
Initially I have tried <choose> to achieve this:
<p:dataTable var="item" value="${bean.items}" editable="true" editMode="cell">
<p:column headerText="column A">
<c:choose>
<c:when test="${item.isEditable}">
<p:cellEditor id="title">
<f:facet name="output">
<h:outputText value="#{item.title}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.title}"/>
</f:facet>
</p:cellEditor>
</c:when>
<c:otherwise>
<h:outputText value="#{item.title}"/>
</c:otherwise>
</c:choose>
</p:column>
...
but it does not work. Another approach is to use rendered attribute:
<p:column headerText="column A">
<p:cellEditor rendered="${item.isEditable}">
<f:facet name="output">
<h:outputText value="#{item.title}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.title}"/>
</f:facet>
</p:cellEditor>
<h:outputText value="#{item.title}" rendered="#{!item.isEditable}"/>
</p:column>
that works fine - user are able to edit only allowed cells.
But even if cell is not editable it still has ui-cell-editing class and looks like editable cell for user.
What is a correct way to apply condition to cell editing?
Thank you!

To properly learn the lesson of JSTL fail, it failed for the reason explained in the following answer: JSTL in JSF2 Facelets... makes sense? In a nutshell: #{item} isn't available at the moment JSTL runs.
Coming back to the concrete question: that style class is been inserted due to the combination editMode="cell" and the physical presence of <p:cellEditor> component in the <p:column>. The PrimeFaces datatable renderer isn't at all considering if the <p:cellEditor> is rendered or not. It just outright inserts the ui-editable-column style class which in turn triggers the ui-cell-editing style via JS/jQuery. You were looking in the right direction for the solution, JSTL which can conditionally physically add/remove JSF components in the JSF component tree, but unfortunately it won't work in this construct.
Your best bet is to post an issue report to the PrimeFaces guys whereby you ask to not only consider the physical presence of <p:cellEditor> component, but also its isRendered() outcome. Considering PrimeFaces version 3.5, that would be in line 796 of DataTableRenderer class which originally looks like this (newlines introduced for readability):
String styleClass = selectionEnabled
? DataTable.SELECTION_COLUMN_CLASS
: (column.getCellEditor() != null)
? DataTable.EDITABLE_COLUMN_CLASS
: null;
And should be modified as follows:
String styleClass = selectionEnabled
? DataTable.SELECTION_COLUMN_CLASS
: (column.getCellEditor() != null && column.getCellEditor().isRendered())
? DataTable.EDITABLE_COLUMN_CLASS
: null;
If you can't wait, in the meanwhile you could homegrow a custom renderer.
package com.example;
import org.primefaces.component.datatable.DataTableRenderer;
public class MyDataTableRenderer extends DataTableRenderer {
#Override
protected void encodeCell(FacesContext context, DataTable table, UIColumn column, String clientId, boolean selected) throws IOException {
// Copypaste here the original encodeCell() source code and make modifications where necessary.
}
}
Then, to get it to run, register it as follows in faces-config.xml:
<render-kit>
<renderer>
<description>Overrides the PrimeFaces table renderer with customized cell renderer.</description>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.DataTableRenderer</renderer-type>
<renderer-class>com.example.MyDataTableRenderer</renderer-class>
</renderer>
</render-kit>

Related

When to use :(colon) in rendering in jsf components

i have read that, we should use :(colon) to render components in other form. but in my case
<h:form id="form">
<p:growl id="messages"></p:growl>
<p:dataTable var="e" value="#{employees.eList}" id="elist1"
editable="true">
<f:facet name="header">
In-Cell Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{employees.onEdit}" update=":form:messages"/>
<p:ajax event="rowEditCancel" listener="#{employees.onCancel}" />
<p:column headerText="name" style="width:30%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{e.name}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{e.name}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
.......... ...........
</p:datatable>
i want to update messages(growl) from datatable component why i have to use colon update=":form:messages"
All relative client IDs (the ones not starting with :) are searched relative to the parent component which implements the NamingContainer interface. As you can see in the linked javadoc, that are at least all UIForm and UIData components. The <h:form> is such one. The <p:dataTable> is another one.
In your particular case, the <p:ajax> is enclosed in <p:dataTable>. So, the <p:ajax update="messages"> would look for a child component with ID messages inside the context of <p:dataTable>. However, since there is none, it won't find anything. You actually need to use an absolute client ID instead because it's outside the context of the current NamingContainer parent.
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Filter Facet is not working in Richface 4.3x

In the Code below, You can observe two things:
1) Default sorting is getting utilized.
2) Image based custom filter is used.
Problem I am facing : When I click on filter image default sorting is getting triggered.
Need a way by which If I click on filter, default sorting doesn't get triggered. (This was achieved in Richface 3.3 by putting this custom filter in filter facet.)
Any help or hint would be greatly appreciated.
<rich:column sortBy="#{model.modVal}" label="Model Value"
sortable="true" id="modelVal" rendered="#{backingBean.renderMap['modVal']}">
<f:facet name="header">
<h:outputText value="Model Value" />
<h:graphicImage title="Filter"
value="#{backingBean.dataModel.modValFilter }">
<a4j:ajax event="click" render="filterCol"
execute="#form"
listener="#{backingBean.loadModalPanelData('modVal') }"
oncomplete="#{rich:component('filterCol')}.show()">
</a4j:ajax>
</h:graphicImage>
</f:facet>
<h:outputText value="#{model.modeVal}"
title="#{model.modelVal}" />
</rich:column>
Use manual sorting, and place a click-able panel in your header for sorting, and another panel for filtering.
The filter facet has been deprecated in favour of the header facet. So what you used to have in the filter facet, you can place in the header facet:
<f:facet name="header">
<h:panelGrid>
<h:outputText value="Model Value"/>
<h:graphicImage title="Model Filter"/>
</h:panelGrid>
</f:facet>

ignoreValidationFailed doesn´t work inside p:dataTable

I am using actionListener ajax call inside datatable and trying to do the following :
skip validation
update the model with the inserted values
I knew that omnifaces utility liberary by BalusC can do this using o:ignoreValidationFailed
But it failed with me to work inside primefaces datatable.
Also I found that it failed to work inside ui:repeat in another post here
I dont know if its a bug or not.
here is my code example
<o:form id ="trans_desc_form">
<p:outputPanel id="stkdetailsid">
<p:dataTable id="transactiondetailsid" value="#{stockTransactionsBean.stkTransHeader.stkTransDetailsList}"
var="stkTransDet" rowIndexVar="rowIndex">
<p:column>
<f:facet name="header">
<h:outputText value="Item Code" />
</f:facet>
<p:autoComplete id="dd" required="true"
value="#{stkTransDet.item}" var="i" itemLabel="#{i.itemno} #{i.itemnamee}"
itemValue="#{i}" converter="itemsConverter"
completeMethod="#{stockTransactionsBean.completeItems}"/>
</p:column>
<p:column>
<p:commandButton value="-" update="#form" process="#form"
actionListener="#{stockTransactionsBean.removeRow(rowIndex)}">
<o:ignoreValidationFailed />
</p:commandButton>
</p:column>
</p:dataTable>
</p:outputPanel>
</o:form>
As a workaround, I added
1- add a condition to the required field to know if the ajax come from submit button or not
to the autoComplete component where the trans_desc_form is thte entire form id and savetransid is the submit button save id
required="#{!empty param['trans_desc_form:savetransid']}"/>
2- I removed #NotNull from my JPA entity which force the validation
#JoinColumn(name = "ITEMNO", referencedColumnName = "ITEMNO")
#ManyToOne(optional = false, fetch = FetchType.LAZY)
//#NotNull
private Item item;
To skip validation you can use the immediate="true" attribute on your p:commandButton

p:commandLink in p:dataTable does not invoke action on first click, but only on second click

I'm using primefaces commandLink in p:datatable and when user clicks on link. It's supposed to navigate to another page including specific info of object that is chosen from table. I don't use any ajax tags. Problem is when first time clicks on link it doesn't invoke action actually nothing happens and on second click it works. Here is my code :
JSF with Datatable
<h:form>
<h:outputText value="Nothing is found" rendered="#{searchView.citizenSearchList.rowCount==0}"/>
<p:dataTable var="cust" value="#{searchView.citizenSearchList}" dynamic ="true" paginator="true" rows="5" paginatorAlwaysVisible="false" style="width: 700">
<p:column>
<f:facet name ="header">
<h:outputText value="name "/>
</f:facet>
<h:outputText value="#{cust.name}"/>
</p:column>
<p:column>
<f:facet name ="header">
<h:outputText value="lastname "/>
</f:facet>
<h:outputText value="#{cust.citizenList.get(0).lastname}"/>
</p:column>
<p:column>
<f:facet name ="header">
<h:outputText value="Id "/>
</f:facet>
<h:outputText value="#{cust.registernumber}"/>
</p:column>
<p:column>
<f:facet name ="header">
</f:facet>
<p:commandLink value="See" action="#{customerView.prepareCitizenView()}"/>
</p:column>
</p:dataTable>
</h:form>
ManagedBean: customerView's action method
#ManagedProperty(...)
SearchView searchview;
public String prepareCitizenView(){
this.customer = (Customer) searchview.citizenSearchResultList.getRowData();
if(this.customer != null)
return "citizeninfo";
else
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "no data.", "no data"));
return null;
}
ManagedBean: searchView
DataModel citizenSearchResultList;
public DataModel getCitizenSearchResultList() {
return citizenSearchResultList;
}
You can return redirect to same page.
customerView.prepareCitizenView can retruns same page with redirect.
like
return "citizeninfo.jsf?faces-redirect=true";
this "jsf" changes according to what you use
As mehmet cinar stated, the solution is to use a redirect in your navigation outcome. I've had this problem myself.
return "citizeninfo.jsf?faces-redirect=true";
From what I was able to deduce, the reason is that the ajax submit will not contain a ViewState request parameter for the new page. Without the ViewState the first time, things break.
Once you perform a redirect, the redirect will correctly have a Viewstate parameter appended to the request, and buttons can be clicked the first time
If p:commandLink is included within two h:form then action will be invoked on second call.
Check the outer tags of p:commandLink

Getting the filtered list in datatable

I am trying to filter a datatable using filter field in the column and get the filtered list (which populates datatable) and update another component (Toplam TL Teminati and Toplam Dolar Teminati) according to the filtered list's values in my page.
Is there anyway to do this in Primefaces 2.2.1 and JSF 2? If not can you rec commend a workaround for this case?
Thanks in advance.
To give you an example of how I achieved custom filter logic in my Primefaces 2.2.1 dataTable, I am giving you a scaled version of my code.
<p:dataTable value="#{listBeans.beans}" var="bean" dynamic="true" paginator="true" rows="20" paginatorPosition="bottom"
emptyMessage="No Beans" loadingMessage="Loading. . ." selectionMode="single" selection="#{listBeans.selectedBean}"
id="beanList" widgetVar="beanTable">
<f:facet name="header">
<h:panelGrid columns="4">
<h:outputText value="Bean List" />
<p:outputPanel>
<h:outputText value="Year Filter: " />
<h:selectOneMenu value="#{listBeans.yearFilter}"
onchange="yearFilterBtn.jq.click(); refreshFilters();">
<f:selectItems value="#{listBeans.years}" />
</h:selectOneMenu>
<p:commandButton id="yearFilterBtn" widgetVar="yearFilterBtn" action="#{listBeans.filterYears}"
update="listBeansForm:beanList" style="display:none;" />
</p:outputPanel>
<p:outputPanel>
<h:outputText value="Filter By Beanchild: " />
<p:inputText value="#{listBeans.beanchildFilter}" style="width: 150px; margin-right: 4px;" />
<!-- refreshFilters forces the visitor filter to refresh the selection if column filters are selected. -->
<p:commandButton oncomplete="refreshFilters();" value="Filter"
action="#{listBeans.filterBeanchildren}" update="listBeansForm:beanList" />
</p:outputPanel>
<p:commandButton value="Export to XLS" ajax="false">
<p:dataExporter target="beanList" type="xls" fileName="BeanReport"
excludeColumns="0,5,6" postProcessor="#{listBeans.postProcessExcelReport}" />
</p:commandButton>
</h:panelGrid>
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column filterStyleClass="filtertag" filterBy="#{bean.beanDateDisplay}" filterMatchMode="startsWith">
....
</p:dataTable>
Without really going into too much detail about the managed bean code, the actions of the command button are essentially passing filter arguments to my BO layer that requery the database for the new list of beans. The explicit update of the dataTable component is needed to refresh the data.
You will notice that on the explicit Beanchild Filter button that is not hidden, I have an oncomplete attribute that references a javascript function called refreshFilters(). I can't remember exactly the problem I had, but I think it is a bug in the 2.2.1 version of Primefaces when a column filter value exists and an asynchronous update occurs within the dataTable itself. Here is the javascript function:
function refreshFilters() {
var filters = jQuery('.filtertag');
var uppedOnce = false;
filters.each(function(idx) {
var curEl = jQuery(this);
if (curEl.val() != '') {
curEl.keyup();
uppedOnce = true;
}
});
if (!uppedOnce) {
jQuery(filters[0]).keyup();
}
}
You can see here that I am locating every DOM element that has the class filtertag, which would be the column filters. I am saying that if a value exists in that field after the server action is complete, then I am manually triggering a keyup event as this will "refilter" the column with the previous value from before.
I am not sure if it is necessary in later versions of Primefaces, I am not even sure it is necessary now, so I suggest trying to do this without the Javascript workaround and if you run into problems cooridnating the two then you can consider using the Javascript.

Resources