I am trying to use primfaces' selectonemenu and menubar for navigation, however I am having trouble getting the menubar to display the selectOneMenu as it only seems to want to recognize tags and not tags. Any ideas?
menubar http://www.primefaces.org/showcase-labs/ui/menubar.jsf
selectOneMenu http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf
Use a Toolbar instead of a Menubar:
<p:toolbar>
<p:toolbarGroup align="left">
<p:selectOneMenu>
<f:selectItem itemValue="Red" itemLabel="Red"/>
<f:selectItem itemValue="Blue" itemLabel="Blue"/>
<f:selectItem itemValue="Green" itemLabel="Green"/>
<!-- other components -->
</p:selectOneMenu>
</p:toolbarGroup>
</p:toolbar>
Produces:
Related
How could I Uncheck all checkboxes from selectManyCheckbox when choosing "No" from selectOneRadio
<p:selectOneRadio id="radio" value="#{myView.myObject.myBoolean}">
<f:selectItem itemLabel="Si" itemValue="#{true}"/>
<f:selectItem itemLabel="No" itemValue="#{false}"/>
<p:ajax process="radio" event="valueChange" update="#widgetVar(displayPanel)"/>
<p:ajax update="#this"/>
</p:selectOneRadio>
<p:panel widgetVar="displayPanel">
<p:outputPanel rendered="#{myView.myObject.myBoolean}">
<p:selectManyCheckbox widgetVar="mySelections" value="#{myView.myObject.myObjectList}" layout="grid" columns="8" styleClass="grid-checkbox">
<p:ajax update="#this"/>
<f:selectItems value="#{myView.things}" var="thing" itemLabel="#{thing.idThing}" itemValue="#{thing.thing}"/>
</p:selectManyCheckbox>
</p:outputPanel>
</p:panel>
As seen, update="#widgetVar(displayPanel)" will show the outputPanel when myBoolean is true and viceversa.
What I need to achieve is to uncheck all the already selected checkboxes (mySelections) when myBoolean is false (by selecting "No" from selectOneRadio above.
Possible? If so, Could you please show me how, I'm just starting on PrimeFaces.
Normally, the easiest way would be using the client side API uncheckAll. However, there is a bug. But, I've fixed it. So you can wait for PrimeFaces 12.0.0-RC3 or create a Monkey Patch.
A simple demo would be:
<p:selectOneRadio id="radio" value="#{testView.bool}"
onchange="if(this.value==='false'){PF('mySelections').uncheckAll()}">
<f:selectItem itemLabel="Si" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
</p:selectOneRadio>
<p:selectManyCheckbox widgetVar="mySelections" value="#{testView.strings}">
<f:selectItems value="#{['a','b','c']}"/>
</p:selectManyCheckbox>
This eliminates the need to use Ajax.
p:selectOneMenu result itemlists are initially shows stick to selectOneMenu dropdown, As when I scroll using mouse scroller the result Itemlist moves up or down as I scroll the mouse.
This p:selectOneMenu I have in the dialog box.
This works fine if I use the h:selectOneMenu. The problem is in p:selectOneMenu (primeface 6.2 version).
I have tried with attribute PanelStyle="position:fixed;" but this not helped. The problem appears only in when I use mouse scroller.
Can somebody please guide me how to fix this.
<p:dialog header="Add User" widgetVar="addUserWidget" id="addUserWidgetId" modal="true">
<p:fragment>
<h:panelGrid columns="2" id="myGridPanelId" width="180px">
<h:panelGroup id="groupPan">
<p:selectOneMenu value="#{myBean.selectedUser}" style="width:140px;">
<f:selectItems
value="#{myBean.userLists}" id="userNameItem"
var="user" itemLabel="#{user.name}" itemValue="#{user.name}">
</f:selectItems>
<f:ajax event="change" execute="#this" render="groupPan" listener="#{myBean.userAdd()}" />
</p:selectOneMenu>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid id="panelBtnGrid">
<p:commandButton ajax="true" value="Add" id="addBtnId" process="#this"
action="#{myBean.saveUser()}" />
</h:panelGrid>
</p:fragment>
</p:dialog>
The result Item list should stick to the p:selectOneMenu dropdown box.
Primefaces Migration-Guide 5.3 to 6.0:
ContextMenu: p:contextMenu must be placed AFTER the target component (e.g. datatable) in the xhtml now.
I tried exactly that, but it' not working. No Menu at all.
Placing ContextMenu before dataTable: Menu is showing. Additional output on browser console:
ContextMenu targets a widget which is not available yet. Please place the contextMenu after the target component. targetWidgetVar: widget_base_cars
My Webshpere Liberty log:
...org.primefaces.webapp.PostConstructApplicationEventListener I Running on PrimeFaces 7.0
Java:
java.version = 1.8.0_102
Stripped down to primefaces showcase
<h:body>
<h1>Context Menu</h1>
<h2>ContextMenu: p:contextMenu must be placed AFTER the target component</h2>
<h:form id="base" >
<p:dataTable id="cars" var="car" value="#{dtContextMenuView.cars}" rowKey="#{car.id}" >
<f:facet name="header">
List with #{dtContextMenuView.numberOfCars} Items
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<p:contextMenu for="cars" >
<p:menuitem value="Hello" />
<p:menuitem value="World" />
</p:contextMenu>
<h2>but it fails</h2>
</h:form>
</h:body>
I expect the menu to show on right click.
Is it a bug, or am i the bug?
I reproduced this testing around with PF 5.3/6.0/7.0. I'm with you as long as your p:dataTable is not selectable:
The p:contextMenu appears on rightclick when added above the p:dataTable element in xhtml. When added below, no context menu appears at all. But tbh.: is a context menu useful on a datatable which does not allow selection?
When making it selectable by adding the attributes
selection="#{myBean.selectedValue}" selectionMode="singel"
it behaves like this:
p:contextMenu below p:dataTable as suggested by migration guide: On rightclick, the clicked row is selected and context menu appears on it.
p:contextMenu above p:dataTable: on rightclick, context menu appears either, but the row is not selected.
So if p:contextMenu is added above the table, selection does not work as expected which must be the reason for the migration guide telling "add it below!".
Btw: I did not get that warning in my JavaScript console during my tests, don't know why.
I am working on a JSF page which has a dropdown based on selectOneMenu
<h:selectOneMenu id="speciality_unit" value="#{editCdc.selectedUnit}">
<f:selectItem itemValue="" itemLabel="Select Unit" />
<f:selectItems value="#{editCdc.listOfUnit}" />
</h:selectOneMenu>
The problem I am facing here is that whenever I select this dropdown, it shows the default option in the list along with other items. I.e. it shows "Select Unit" along with other units. I want to remove this "Select Unit" from the dropdown list. How I can do this?
Hide it using CSS.
<h:selectOneMenu ... styleClass="hideFirstOption">
select.hideFirstOption option:first-child {
display: none;
}
I am using primefaces 3.2 and i have used selectOneMenu from primefaces.When i drag and drop somethine into the selectOneMenu box it displaying some url(for example drag and drop the image into the selectOneMenu).Text box allows that drag and drop but why selectOneMenu.How to avoid that.
<p:selectOneMenu value="#{buttonBean.number}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneMenu>
Primefaces 3.2 uses an html input to display the selected value.
If you can, update to 3.4. The helper input is gone, no this issue.
You can test it in the showcase.