I need to make a column editable by default in a datatable.
I do not want to use rowEditor. As I do not want a coloumn to become editable on click of any button.
I am able to make a cell editable by default. But, as per my understanding, cell editor does not have any event associated with it.
How can I add an event to the cell.
The code through which I made the cell editable is:
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 1" />
</f:facet>
<p:cellEditor>
<f:facet name="input">
<h:outputLabel value="#{emp.empCode}" />
</f:facet>
<f:facet name="output">
<p:inputText value="#{emp.empCode}" />
</f:facet>
</p:cellEditor>
</p:column>
Thanks,
Shikha
I do not want to use rowEditor. As I do not want a coloumn to become editable on click of any button.
Just replace
<p:cellEditor>
<f:facet name="input">
<h:outputLabel value="#{emp.empCode}" />
</f:facet>
<f:facet name="output">
<p:inputText value="#{emp.empCode}" />
</f:facet>
</p:cellEditor>
by
<p:inputText value="#{emp.empCode}" />
and remove <p:rowEditor>. Add if necessary a save button below the table.
Related
I have PIN column in DataTable coming from DataBase(as String). As of now the PIN is visible in DataTable, But it has to be shown as password with Asterix(****) and should be visible by double click then editable, after editing done it should be again Asterix(*****). Is there any way to convert Output text value as Password? I am queit new to Primefaces.
<p:column headerText="PIN">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="{PinDTO.pin}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{PinDTO.pin}"
label="Name" />
</f:facet>
</p:cellEditor>
</p:column>
Is there any way to convert Output text value as Password?
You can try to use this tag
<p:password />
For more detailed information you can check the following link
https://www.primefaces.org/showcase/ui/input/password.xhtml?jfwid=e4236
<p:password id="toggle" value="#{passwordView.password6}" toggleMask="true" redisplay="true"/>
This is how i solved.
<p:column headerText="PIN" style="width:250px;">
<p:cellEditor>
<f:facet name="output">
<p:password id="password" value="#{PinDTO.Pin}"
style="border:0px;" redisplay="true" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{PinDTO.Pin}" label="Name" />
</f:facet>
</p:cellEditor>
</p:column>
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 have the following code:
<p:dataTable style="background-color:white;color: white;" var="url" value="#{data.data.requirementsDocuments}" editable="true" id="urlTable" editMode="cell">
<p:ajax event="cellEdit" update="urlTable" immediate="true" process="#this"/>
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{url}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{url}" style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
The problem is that each time I wrote a new value inside the cell it is not updating it. Lets say I have a cell with text "Hello" when I edit it to lets say "World" and press enter, it is not updating the value. requirementsDocuments is List with strings.
I want to export values from my table.
However, my columes look like that:
<p:column headerText="Special Remarks" style="width:15%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{product.specialRemarks}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{product.specialRemarks}" style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
When I export the files I get org.primefaces.component.celleditor.CellEditor#446d0c6a in every cell back?
Any idea how to fix that?