I have datatable with celledit, the ajax event does not fire on cell edit. The event listener does not get called.Thanks.
<ui:define name="content">
<h:form prependId="false" id="tForm">
<p:datatable id="dTable" value="#{bean.tData}" var="data"
editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{bean.updateData(data)}" />
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{data.name}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{data.name}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
</p:datatable>
</h:form>
</ui:define>
bean listener method
public void updateData(Data d){
logger.debug(d.getName());
}
I think you should use this instead:
<p:ajax event="cellEdit" listener="#{bean.updateData}" />
public void updateData(CellEditEvent event) {
Object newValue = event.getNewValue();
logger.debug(newValue.toString());
}
Related
I'm trying to get a value from an inputtext typed inside a datatable column and update an outputtext from other column with the multiply of this inputtext value and other inputtext value. My problem is that I can't get the value typed when ajax is called because I'm getting the previous value from the field that receive the value (gasto.valor), not the current value typed. This is my code:
XHTML
<p:dataTable binding="#{cadastroContasBean.dataTable}" var="gasto"
value="#{cadastroContasBean.listaGasto}" scrollable="true"
scrollHeight="150" editable="true" editMode="cell" id="Tabela"
widgetVar="wTabela">
<p:column headerText="Nome">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{gasto.nome}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{gasto.nome}" style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Quantidade">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{gasto.quantidade}" />
</f:facet>
<f:facet name="input">
<p:inputText id="inputQtd" value="#{gasto.quantidade}"
style="width:96%" onkeydown="MascaraNumero()"
onkeyup="MascaraNumero()">
<p:ajax event="blur" render="outputVT" listener="#{cadastroContasBean.atualizaVT}" execute="inputQtd" process="#this" immediate="true"/>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Valor">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{gasto.valor}">
<f:convertNumber currencySymbol="R$" type="currency" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText id="inputValor" value="#{gasto.valor}"
style="width:96%" onkeyup="mascara(this, valor)"
onkeydown="mascara(this, valor)">
<f:convertNumber pattern="#,##0.00"></f:convertNumber>
<f:validator validatorId="MoedaValidator" />
<p:ajax event="blur" render="outputVT" listener="#{cadastroContasBean.atualizaVT}" execute="inputValor" process="#this" immediate="true" >
</p:ajax>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Valor Total" id="vt">
<h:outputText id="outputVT" value="#{gasto.valorTotal}">
<f:convertNumber currencySymbol="R$" type="currency" />
</h:outputText>
</p:column>
</p:dataTable>
MB
public void atualizaVT(AjaxBehaviorEvent event) {
Gastos gastoDataTableAtual = ((Gastos)dataTable.getRowData());
if(!event.getComponent().getId().equals("inputQtd")){
BigDecimal valorAtual = (BigDecimal)((UIOutput)event.getSource()).getValue();
gastoDataTableAtual.setValorTotal(valorAtual.multiply(new BigDecimal(((Gastos)dataTable.getRowData()).getQuantidade())));
Iterator<Gastos> gastosAsIterator = listaGasto.iterator();
while (gastosAsIterator.hasNext()){
Gastos it = gastosAsIterator.next();
int id = 0;
if(it.getId() == gastoDataTableAtual.getId()){
//listaGasto.get(id).setValor(gastoDataTableAtual.getValor());
listaGasto.get(id).setValorTotal(gastoDataTableAtual.getValorTotal());
((Gastos)dataTable.getRowData()).setValorTotal(gastoDataTableAtual.getValorTotal());
break;
}
id++;
}
}else{
Integer valorAtual = (Integer)((UIOutput)event.getSource()).getValue();
gastoDataTableAtual.setValorTotal(((Gastos)dataTable.getRowData()).getValor().multiply(new BigDecimal(valorAtual)));
Iterator<Gastos> gastosAsIterator = listaGasto.iterator();
int id = 0;
while (gastosAsIterator.hasNext()){
Gastos it = gastosAsIterator.next();
if(it.getId() == gastoDataTableAtual.getId()){
//listaGasto.get(id).setQuantidade(gastoDataTableAtual.getQuantidade());
listaGasto.get(id).setValorTotal(gastoDataTableAtual.getValorTotal());
((Gastos)dataTable.getRowData()).setValorTotal(gastoDataTableAtual.getValorTotal());
break;
}
id++;
}
I understant that ajax event "blur" is called before "gasto.valor" is changed, but when I change the ajax event to "change" the method "atualizaVT" is not called. How can I get this value?
"change" event is not an AjaxBehaviorEvent.
Try to implement atualizaVT without argument
In this way:
public void atualizaVT(){
This should work.
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.
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
I have a primefaces datatable with the attribute editable="true" so I can't edit the rows dynamically. I have two fields: an inputText and a selectOneMenu. I want to be able to add rows dynamically from the footer. I added empty field in the footer and when the user click a button, I want to add the new line to the datatable with the correct values.
Here is the code I have:
<h:form>
...
<p:dataTable value="#{bean.myObjects}" id="myDatatable" editable="true" var="obj">
<f:facet name="header">
<h:outputText value="My Datatable" />
</f:facet>
<p:column headerText="My String value">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{obj.myString}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{obj.myString}"/>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<h:inputText value="#{bean.myNewObject.myString}" />
</f:facet>
</p:column>
<p:column headerText="My List Value">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{bean.myListValue ? 'yes' : 'no'}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{bean.myListValue}" >
<f:selectItem itemValue="true" itemLabel="yes" />
<f:selectItem itemValue="false" itemLabel="no" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<h:selectOneMenu value="#{bean.myNewObject.myListValue}" >
<f:selectItem itemValue="true" itemLabel="yes" />
<f:selectItem itemValue="false" itemLabel="no" />
</h:selectOneMenu>
</f:facet>
</p:column>
<p:column>
<p:rowEditor />
<f:facet name="footer">
<h:commandButton actionListener="#{bean.addRow}">
<f:ajax execute="myDatatable" render="myDatatable" />
</h:commandButton>
</f:facet>
</p:column>
</p:dataTable>
...
</h:form>
In my bean, I just have this for the addRow method:
public void addRow() {
this.myObjects.add(this.myNewObject);
this.myNewObject = new MyObject();
}
and the init:
#PostConstruct
public void init() {
this.myObjects = Controller.getAllMyObjects();
this.myNewObject = new MyObject();
}
I could precise that the bean is in ViewScope. The result is that the line is added, the string value is correct but the list value is always "no" even if I set it to true with this.myNewObject.setMyListValue(true) in the bean after instanciate the object.
I know that this is something with to render or the execute of attributes.
If I change the line:
<f:ajax execute="myDatatable" render="myDatatable" />
to:
<p:ajax update="#form" />
the list value is true but the string value is not set.
How to be sure that both of my attribute are rendered and how can I get there values without submiting the whole form?
Thanks
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)