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>
Related
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 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 element where I use a rowEditor. Additionally it is possible to add a new record which is implemented as inputFields in the footer of the table. All elements are validated. The problem is, that when a user hits the rowEditor the validation complains that the values for a new record are not set.
How can I avoid that the new record fields are being validated when the rowEditor is clicked?
I fiddled around a bit with proccess & immediate on the ajax events but I'm not able to figure this out. Is this possible and if yes, how? I'm thankful for help.
<p:dataTable var="contact"
value="#{data.activeCustomer.contacts.toArray()}"
id="contactsTable"
emptyMessage="#{ivy.cms.co('/Translations/Administration/noRecordsFoundSearch')}"
editable="true">
<p:ajax event="rowEdit" listener="#{logic.onEdit(contact)}" />
<p:ajax event="rowEditCancel" listener="#{logic.onCancel}" />
<f:facet name="header">
#{ivy.cms.co('/Translations/Administration/Contacts/labelContacts')}
</f:facet>
<p:column
headerText="#{ivy.cms.co('/Translations/Administration/Contacts/prename')}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{contact.prename}" />
</f:facet>
<f:facet name="input">
<p:inputText required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterPrename')}"
value="#{contact.prename}"></p:inputText>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<p:inputText required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterPrename')}"
value="#{data.contactPrename}" />
</f:facet>
</p:column>
<p:column
headerText="#{ivy.cms.co('/Translations/Administration/Contacts/surname')}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{contact.surname}" />
</f:facet>
<f:facet name="input">
<p:inputText required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterSurname')}"
value="#{contact.surname}"></p:inputText>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<p:inputText required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterSurname')}"
value="#{data.contactSurname}" />
</f:facet>
</p:column>
<p:column
headerText="#{ivy.cms.co('/Translations/Administration/Contacts/phone')}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{contact.phone}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{contact.phone}"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterPhone')}"
required="true"></p:inputText>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<p:inputText
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterPhone')}"
required="true" value="#{data.contactPhone}" />
</f:facet>
</p:column>
<p:column
headerText="#{ivy.cms.co('/Translations/Administration/Contacts/email')}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{contact.email}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{contact.email}" required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterEmail')}">
<f:validator validatorId="EmailValidator" />
</p:inputText>
</f:facet>
</p:cellEditor>
<f:facet name="footer">
<p:inputText required="true"
requiredMessage="#{ivy.cms.co('/Translations/CustomerAdministration/Validation/enterEmail')}"
value="#{data.contactEmail}">
<f:validator validatorId="EmailValidator" />
</p:inputText>
</f:facet>
</p:column>
<p:column style="width: 6%"
headerText="#{ivy.cms.co('/Translations/CustomerAdministration/actionsColumnTitle')}">
<p:rowEditor />
<p:commandLink styleClass="ui-icon ui-icon-trash"
actionListener="#{logic.deleteContact(contact)}"
icon="ui-icon-trash" update=":#{p:component('contactForm')}"
immediate="true" />
<f:facet name="footer">
<h:commandButton
value="#{ivy.cms.co('/Translations/Administration/Contacts/ButtonAddContact')}"
actionListener="#{logic.addContact}" />
</f:facet>
</p:column>
</p:dataTable>
</h:form>
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?
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.