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
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 this dialog:
<p:dialog
id="dlgComment"
widgetVar="dialogComentario"
modal="true"
header="#{messages.comentarios}"
width="600px"
resizable="false" showEffect="clip" hideEffect="clip">
<h:form id="formComentario">
<p:panelGrid columns="2" style="width: 100%">
<f:facet name="header">
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.titulo}"/>
</f:facet>
<h:outputText value="#{messages.inicio}" />
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.inicio}" />
<h:outputText value="#{messages.gravidade}" />
<h:outputText value="#{monitorarEventoControlador.eventoSelecionado.gravidade}" />
</p:panelGrid>
<p:dataTable id="tableComentario" var="comentario" value="#{monitorarEventoControlador.eventoSelecionado.getComentariosAsList()}" emptyMessage="#{messages.noRecordsFound}">
<f:facet name="header">
#{messages.comentarios}
</f:facet>
<p:column headerText="#{messages.dataHora}">
<h:outputText value="#{comentario.dataHora}">
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="#{monitorarEventoControlador.buscaTimeZone()}"/>
</h:outputText>
</p:column>
<p:column headerText="#{messages.usuario}">
<h:outputText value="#{comentario.usuario.orgao.sigla} - #{comentario.usuario.apelido}"/>
</p:column>
<p:column headerText="#{messages.texto}">
<h:outputText value="#{comentario.texto}" />
</p:column>
</p:dataTable>
<p:panelGrid columns="2" style="width: 100%">
<h:inputText value="#{monitorarEventoControlador.comentarioSelecionado.texto}" maxlength="80"/>
<p:commandButton value="#{messages.comentar}" actionListener="#{monitorarEventoControlador.adicionarComentario()}" icon="ui-icon-check" update="tableComentario" />
</p:panelGrid>
</h:form>
</p:dialog>
And the bean:
public void adicionarComentario() {
comentarioSelecionado.setDataHora(new Date());
comentarioSelecionado.setEvento(eventoSelecionado);
comentarioSelecionado.setUsuario(autenticador.getUsuarioCorrente());
todosOsComentarios.colocar(comentarioSelecionado);
notificarComentario(comentarioSelecionado);
eventoSelecionado.getComentarios().add(comentarioSelecionado);
todosOsEventos.colocar(eventoSelecionado);
iniciarComentario(eventoSelecionado);
}
private void notificarComentario(Comentario comentario) {
Notificacao n = new Notificacao();
n.setDataHora(comentario.getDataHora());
n.setDescricao(DateUtil.dataHoraFormatada(n.getDataHora()) + " - " + comentario.getUsuario().getOrgao().getSigla() + "(" + comentario.getUsuario().getApelido() + "): " + comentario.getTexto());
n.setComentario(true);
n.setInforme(comentario.getEvento().getInforme());
comentario.getEvento().getInforme().getNotificacoes().add(n);
}
public void iniciarComentario(Evento evento) {
comentarioSelecionado = new Comentario();
setEventoSelecionado(evento);
}
The commandButton should update a dataTable. I have just moved from Prime 3.5 to 5.1 and among other problems I managed to figure out, there is this one that's realy annoying. It was working on Prime 3.5.
To be more specific about what is going wrong here: The action is fired normaly, the data is inserted correctly, but the dataTable is no longer updated. It is the very same code I was using yesterday with Prime 3.5, but now, using Prime 5.1 the dataTable does not refresh anymore.
Any ideas ? Thanks
use : before id
Remember
if you make a dialog
Before dialog old form tag should be close
then dialog content should be placed into another form.
use :dialogid, :dialogFormId
I want a table with in-line editing option in datatable. I am able to write full code but when i am clicking on edit button, the value which i am getting from event object from server side is same as old. I am not getting new values.
how to get new values from event object.
<p:dataTable id="dataTable"
var="osList"
value="#{WLMPortalViewController.allOSInfo}" rowKey="#{osList.osName}"
paginator="true" rows="5"
paginatorPosition="bottom"
editable="true" >
<p:ajax event="rowEdit" update="#this" listener="#{WLMPortalDataController.saveOSData}"/>
<p:column headerText="Options" >
<p:rowEditor />
</p:column>
<p:column headerText="Version" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{osList.osVersion}" />
</f:facet>
<f:facet name="input">
<p:inputText id="inputosVer" required="true" requiredMessage="* Version can't Empty." value="#{osList.osVersion}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
and my server side code look like this
public void saveOSData(RowEditEvent event){
System.out.print(event.getObject());
}