I am trying to capture the value of cell in a data table each time the user clicks it and update the same in a textbox. I referred this primefaces showcase url: https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
CellEdit event doesn't work for me as I do not want the user to edit the cell and hence have disabled the input text box for the cell.
As there is no event for cell select, how can I make it work using javscript/jquery or anything.
<h:form id="form">
<p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}"
editable="true" editMode="cell" widgetVar="cellCars">
<f:facet name="header">
Cell Editing with Click and RightClick
</f:facet>
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.id}" disabled="true"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" disabled="true"
style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:contextMenu for="cars2" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="ui-icon-search"
onclick="PF('cellCars').showCellEditor();return false;" />
<p:menuitem value="Hide Menu" icon="ui-icon-close"
onclick="PF('cMenu').hide()" />
</p:contextMenu>
</h:form>
This is where I want the cell values to get updated as soon as the user clicks on any cell. This textarea is present in the same form as the data table.
<p:panel style="width:56%;height:56%;">
<p:inputTextarea id="notesTextArea" value="#{tree.result}"/>
</p:inputTextarea>
</p:panel>
Please help.
I have a requirement for an editable datatable that has a single column, lets say brand, that when set to "Other" will replace the editor in the next column, model - with an inputText rather than a selectOne. If any particular car brand is selected then the list of models for that brand is displayed. If "Other" is chosen then they can type in a model in an input text field. I can't seem to get the mechanics of this to work in primefaces using various combinations of rendered and events. Is this sort of inline switching of editing components based on the data in the row possible? I've built a simple example using the primefaces datatable demo for cars (and adding a field Model) to illustrate what I am attempting.
Page snippet
<p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}"
editable="true" style="margin-bottom:20px">
<f:facet name="header">
Row Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}"
update="cars1" />
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}"
update="cars1" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.id}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" style="width:100%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand">
<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="#{dtEditView.brands}" var="man"
itemLabel="#{man}" itemValue="#{man}" />
<p:ajax event="change" immediate="true" update="model model_ti"></p:ajax>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Model">
<p:cellEditor rendered="#{car.brand != 'Other'}">
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.model}" style="width:100%"
id="model">
<f:selectItems value="#{dtEditView.getModels(car.brand)}"
var="man" itemLabel="#{man}" itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
<p:cellEditor rendered="#{car.brand == 'Other'}">
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{car.model}" style="width:100%"
id="model_ti" />
</f:facet>
</p:cellEditor>
</p:column>
Thanks!
I was able to solve this problem by putting an ID on the cell editor for model, and adding that to the update list when changing brand.
I've a scenario Like i'll use cell Edit in Data Table.
I've two cells
I've 1st Cell is Editable
2nd Cell Value needs to be Displayed by doing some arithmetic operations on 1st Cell input (Eg: 2nd cell value =(1st cell value)*.14
My Code is Like
<p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell" widgetVar="cellCars">.
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs" />
<p:column headerText="Cell 1">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:96%"/>
<p:ajax event="keyup" listener="#{car.yearupdate}" update="2:3"></p:ajax></f:facet>
</p:cellEditor>
</p:column>
<p:column id="2" headerText="Cell 2">
<f:facet name="output"><h:outputText id="3" value="#{car.year}" /></f:facet>
</p:column>
</p:dataTable>
I want to Know the Java Code for Listener method code to update the 2nd cell value
In xhtml we need to call the listener (p:ajax tag).
in bean update the other column data in bulk ( iterate over all search records and update corressponding valuefor all recs ) ..
xhtml code like
<p:dataTable id="listDetails" value="${managedBean.searchList}" var="row">
<p:ajax event="rowEdit" listener="#{managedBean.onRowEdit}"
update=":managedBean:messages" />
<p:ajax event="rowEditCancel" listener="#{managedBean.onRowCancel}" update=":managedBean:messages" />
<p:column priority="17"
headerText="col 1"
styleClass="wrap text-right" style="width: 140px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.val1}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{row.val1}"
<p:ajax event="blur" listener="#{managed.valueUpdate}"
update="tempValue></p:ajax>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column priority="2" headerText="Col 2" exportable="true">
<p:cellEditor>
<f:facet name="output">
<h:outputText id="value" value="#{row.value}" />
</f:facet>
<f:facet name="input">
<h:outputText id="tempValue" value="#{row.tempValue}" />
</f:facet>
</p:cellEditor>
</p:column>
in Bean
public void valueUpdate(){
for (BO bo : searchList) {
if(bo.val1!=null)
{
bo.value = bo.val1+50; // here u can do calc and assihn to the
bo.tempValue=bo.value;
}
}
}
I have implemented primefaces roweditor for components like inputtext,autocomplete . I am trying to implement for selectmanymenu but could not get the result. If i use cell editor then i need to use input and output value should refer the same . Here selectmanymenu value would be the list not a single variable. So i am not sure how to handle it.
I would like know the proper implementation of p:selectManyMenu with p:cellEditor. I am not sure that we have option to do this also.
I have searched in stackoverflow as well as in google, did not get any answers for this.
Please help me out.
Below is the code details
<p:dataTable
value="#{projectViewBean.projectListToEdit}"
editable="true" var="proj" id="editProjLst">
<p:ajax event="rowEdit" listener="#{projectEntryBean.onEdit}"/>
<p:ajax event="rowEditInit" listener="#{projectEntryBean.onRowEditInit}"></p:ajax>
<p:column headerText="Project Status" id="sts">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel value="#{proj.projectStatus}"></p:outputLabel>
</f:facet>
<f:facet name="input">
<p:selectOneMenu
value="#{proj.projectStatus}"
id="pjstval">
<f:selectItems value="#{projectEntryBean.projectStatusList}"
id="pjstlst" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Phase" id="dbphase">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel value="#{proj.projectPhaseValue}"></p:outputLabel>
</f:facet>
<f:facet name="input">
<p:autoComplete
completeMethod="#{projectEntryBean.autoSearchProjectPhase}"
value="#{proj.projectPhaseValue}"
dropdown="true" scrollHeight="200" emptyMessage="No Phase Found"
minQueryLength="1" forceSelection="true"></p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Project Manager" id="pjtmgr">
<p:cellEditor id="pm">
<f:facet name="output">
<p:outputLabel value="#{projectEntryBean.pjtView.projectUserList}"></p:outputLabel>
</f:facet>
<f:facet name="input">
<p:selectManyMenu
value="#{proj.projectManager}"
id="projectmanagerval">
<f:selectItems value="#{projectEntryBean.pjtView.projectUserList}"
id="pmlst" />
</p:selectManyMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
Finally i am able to achieve it by using converter. It might be helpful for someone. Please see the solution
<p:column headerText="Project Manager" id="pjtmgr">
<p:cellEditor id="pm">
<f:facet name="output">
<p:outputLabel value="#{proj.projectManager}">
<f:converter converterId="vendorConverter"></f:converter>
</p:outputLabel>
</f:facet>
<f:facet name="input">
<p:selectManyMenu
value="#{proj.projectManager}"
id="projectmanagerval">
<f:selectItems value="#{projectEntryBean.pjtView.projectUserList}"
id="pmlst" />
</p:selectManyMenu>
</f:facet>
</p:cellEditor>
</p:column>
I have a datatable in my primefaces application . The code for the frontend has
<!-- Start of customer datatable -->
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header">
List of Customers
<p:outputPanel>
<p:commandButton value="+" type="button" onclick="addCustDlg.show()"/>
</p:outputPanel>
</f:facet>
<p:column sortBy="#{customer.id}" filterBy="#{customer.id}" update=":custList">
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column sortBy="#{customer.name}" filterBy="#{customer.name}" headerText="NAME" filterMatchMode="contains" update=":custList">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.name}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.description}" filterBy="#{customer.description}" headerText="DESCRIPTION">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.description}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.description}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.signupDate}" filterBy="#{customer.signupDate}" headerText="SIGN UP DATE">
<f:facet name="output">
<h:outputText value="#{customer.signupDate}"/>
</f:facet>
</p:column>
<p:column sortBy="#{customer.validUntil}" filterBy="#{customer.validUntil}" headerText="EXPIRY DATE">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.validUntil}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.validUntil}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.status}" filterBy="#{customer.status}" headerText="STATUS">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.status}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.status}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="CREATION DATE" sortBy="#{customer.creationDate}" filterBy="#{customer.creationDate}">
<f:facet name="output">
<h:outputText value="#{customer.creationDate}"/>
</f:facet>
</p:column>
<p:column headerText="LAST UPDATE DATE" sortBy="#{customer.lastUpdateDate}" filterBy="#{customer.lastUpdateDate}">
<f:facet name="output">
<h:outputText value="#{customer.lastUpdateDate}"/>
</f:facet>
</p:column>
<p:column headerText="Options">
<p:rowEditor/>
</p:column>
</p:dataTable>
<!-- End of dataTable (customer datatable) -->
And the function for handling the rowEvent is specified in the bean as
public void custRowEdit(RowEditEvent event){
Customer cust = (Customer) event.getObject();
EntityManagerHelper.beginTransaction();
custDao.update(cust);
EntityManagerHelper.commit();
}
However , on an update event , when I am editing the cell in the table , I do not get the new updated value of the attribute .
Like in the image below , when I edit the status of the entry with ID 1 from 11 to 4 , in the function custRowEdit , when I try to get the customer object , I still get the status of the customer as 11 and not 4 .
Can anyone help me with understanding why the value of the cell is not being set ?
from Where You are invoking custRowEdit(RowEditEvent event) method. I have not any related thing in your code.
In order to make your listener invoke add below attribute in your datatable declaration.
rowEditListener="#{customerBean.listenerInBackingBean}"
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header"
rowEditListener="#{customerBean.cutRowEvent}"
>
Check the implementation of customerBean.customers. I reloaded the content from the database every time the method got called. Wrong. This should happen in the constructor instead. Now everything works fine. Thought it was a JavaScript error ...
Thanks this helped me.
May I add that instead of loading the list from a query in the constructor, if one has a #SessionScoped managed bean one can instead use a reset() method to reset lists to null and then lazily populate the lists from the query. The reset can then be called on page load using an f:event:
<f:view>
<f:metadata>
<f:event type="preRenderView" listener="#{sessionScopedBean.reset}"/>
</f:metadata>
</f:view>
I encountered a similar situation that was resolved by removing the update="" tag from the dataTable. The table's default behavior is to update the row, which evidently, in my case, was not occurring.
You are missin the p:ajax event to trigger the method, function or whatever you wanna do after the cell editing
it's something like
<p:ajax event="cellEdit" listener="#{mBean.onCellEdit}" update="elementX" />