I am trying to develop AutoComplete using Primeface p:autoComplete tag. Suggestion list value is selectable and set to textbox on enter key hit but the problem is if i hover on item and press mouse click then list item value is not set to textbox. Here is the snippet
<p:autoComplete
value="#{autoComplete.city}"
completeMethod="#{autoComplete.getCityList}"
tabindex="1" id="city" placeholder="Mumbai" appendTo="#this"
queryDelay="100">
</p:autoComplete>
Related
In my program, the frontend is created using Primefaces. When creating the registration form, I put a checkbox, which is the acceptance of the terms of service. I would like the checkbox to turn red when clicking "Register" if this checkbox is not checked.
<p:selectBooleanCheckbox immediate="true" id="checkbox"
value="#{backingBean.isChecked}"
style="#{backingBean.isChecked ? 'background-color:red':'background-color:white'}">
</p:selectBooleanCheckbox>
In my baking bean, I have a private field isChecked that stores a boolean.
My first problem is that when I put in 'style' properties " background-color, the color changes also the area around the checkbox, not the border itself. Border-color also does not work.
My second problem is that when I click "Register", the checkbox does not change color.
I m using primefaces 5.0 with JSF 2.1.28. My datatable having multiple columns with horizontal and vertical scroll bar, it having filter text box to filter data. Problem is, When i'm pressing the tab key on filter text field its not moving to next filter text field
Whereas when there is no horizontal scroll bar in tadatable then tab key on filter text field moving accordingly.
I found solution, use scrollWidth attribute in <p:datatable> tag.
<p:datatable scrollHeight="150" scrollWidth="500">
<p:column>you columns</p:column>
</p:datatable>
while using scrollWidth, whenever you press tab OR shift+tab focus goes to next OR previous component of the page.
this was tested with Primefaces 5.0
Using
<p:dataTable
id="myissues"
value="{myIssuesController.myIssuesListModel.issueList}"
var="issueElement"
selection="#{issue}"
selectionMode="single"
rowKey="#{issueElement.idIssue}"
>
along with:
<p:ajax
event="rowSelect"
listener="#{myIssuesController.onSelectOneRow}"
update=":issueDetail"
oncomplete="PF('issueDetail').show();"
/>
I can open a dialog when I select a row on my dataTable.
How can I add an editable column to my table that goes into edition mode instead of opening the detail dialog when I click on one of its cells?
My first idea is to simply make the column editable and execute an oncomplete function that checks if the column selected is editable:
If it is, it will let it go into edition mode; if not it will call PF('issueDetail').show(); and show the detail dialog.
Only I don't know how to check if a particular column has been selected. How can I do that?
Should I do it like this or is there a simpler solution?
I solved using primefaces selection.
Basically, I removed the <p:ajax> component and added an extra column with a magnifier icon and a row editor icon to open the detail dialog / edit the entry; which is a more intuitive and user friendly solution than using the row selection action. The extra column looks like this:
<p:column style="width:32px;text-align: center">
<p:commandButton update=":issueDetail"
action="#{myIssuesController.onSelectOneRow}"
oncomplete="PF('issueDetail').show()"
icon="ui-icon-search" title="View" />
<p:rowEditor />
</p:column>
Im having a problem with Primefaces tabview. It's tabs consists of selectOneMenu elements that look like this:
`
<p:selectOneMenu value="#{bean.currentItem.marketType}">
<f:selectItems value="#{bean.marketTypes}"/>
</p:selectOneMenu>
`
Now, I show this view as a dialog every time i select row from a dataTable (in order to edit selected record). The strange behavior is: the first time I refresh the page, i select the row, and the dialog pops out correctly. In all tabs of a tabview, all selectOneMenu elements shows correct data for selected record. However, when i close dialog and reopen it by selecing row again, only those selectOneMenu elements shows correct data, which where in a selected tab from a tabview before the dialog was closed.
Does any one know how to keep data in all tabs every time I open a dialog without refreshing the page?
Solved, there is a bug in Primefaces that is described here:
Primefaces tabView executes form validation on tab change
I am using a combobox from richfaces. Check the following code
<rich:comboBox id="combo" value="#{thebean.selectedValue}" enableManualInput="false">
<f:selectItems value="#{thebean.listOfValues}" />
</rich:comboBox>
The items are displayed and is not editable. However, the text cursor appears when you click on the selected item. How to remove that ? It should be completely uneditable. No text cursor should appear.
Thanks.
Then just use a normal dropdown, no combobox. Use h:selectOneMenu.