primefaces using components in menuitem - jsf

I want to use other primefaces components in p:menuitem. Components display in page but actionlistener doesn't work and inputtext's value doesn't push to bean's value1 attribute. Is there any way to handle this problem?
<p:commandButton id="dynaButton" value="Search" type="button" icon="ui-icon-extlink"/>
<p:slideMenu overlay="true" trigger="dynaButton" my="left top" at="left bottom" style="width:180px">
<p:submenu label="Search">
<p:menuitem>
<p:outputLabel value="Search by Id" />
<p:inputText value="#{bean.value1}" />
<p:commandButton value="save" actionListener="#{bean.method1}" />
</p:menuitem>
</p:submenu>
<p:submenu label="Search By Product">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:submenu label="Location" icon="ui-icon-extlink">
<p:submenu label="Prime Links">
<p:menuitem value="Prime" url="http://www.prime.com.tr" />
<p:menuitem value="PrimeFaces" url="http://www.primefaces.org" />
</p:submenu>
<p:menuitem value="Mobile" />
</p:submenu>
</p:slideMenu>

Try change your code to the following:
<p:menuitem>
<p:outputLabel value="Search by Id" />
<p:inputText id="inputField" value="#{bean.value1}" />
<p:commandButton process="inputField #this" value="save" actionListener="#{bean.method1}" />
</p:menuitem>
Check these answers too:
Why to add process=“#this” explicitly to p:commandButton to get action invoked?
Understanding process and update attributes of PrimeFaces

You miss the update attribute.
Note that menuitems can be directly processed, but cannot be directly updated, you need to update the entire menu
<p:slideMenu id="menu" ...>
<p:submenu label="Search">
<p:menuitem id="item">
<p:outputLabel value="Search by Id" />
<p:inputText value="#{bean.value1}" />
<p:commandButton value="save" actionListener="#{bean.method1}" process="item" update="menu" />
<h:outputText value="#{bean.value1}" />
</p:menuitem>
</p:submenu>
</p:slideMenu>

Related

PrimeFaces menubar image

I have a problem consisting of not being able to put an icon to the left of the menubar and the menu items to the right, can anyone help me?
<h:body>
<h:form>
<p:menubar>
<f:facet name="options" >
<h:link outcome="index.xhmtl">
<p:graphicImage styleClass="a" name="img/logoGovernoTO.png"/>
</h:link>
</f:facet>
<p:menuitem value="NOTÍCIA" url="#"/>
<p:menuitem value="FÓRUM" url="#"/>
<p:menuitem value="EXPLORE" url="#"/>
<p:menuitem value="SOBRE" url="#"/>
<p:menuitem value="CONTATO" url="#"/>
</p:menubar>
</h:form>
</h:body>
I would have to stay like this
Have you tried with:
<p:graphicImage styleClass="a" name="img/logoGovernoTO.png" style="float: left" />
<p:menuitem value="NOTÍCIA" url="#" style="float: right" />

Update the SelectOneMenu in all pages using template

my problem is that I use a template in pages. This template has a SelectOneMenu. I want to actualize the new selection value in all pages using this template. It should be the same component. Do I need websockets for this or is it possible to actualize the selection of this selectOneMenu without websockets (event-based communication).
My code snippet:
<h:form prependId="false" id="masterTemplateForm">
<p:menubar style="align">
<p:menuitem value="Tab1">
</p:menuitem>
<p:menuitem value="Tab2">
</p:menuitem>
<p:menuitem value="Tab3">
</p:menuitem>
<f:facet name="options">
<ui:insert name="tabTitle" />
<p:outputLabel value="Benutzer: " />
<p:selectOneMenu style="vertical-align:middle;" id="userSelect"
value="#{masterTemplateController.actualUser}"
converter="omnifaces.SelectItemsIndexConverter">
<f:selectItem itemLabel="-- Benutzer auswählen --" itemValue="#{null}" />
<f:selectItems var="currentUser"
value="#{masterTemplateController.findAllUser()}"
itemLabel="#{currentUser.benutzerName}" itemValue="#{currentUser}" />
<p:ajax update="userSelect" event="change" listener="#{masterTemplateController.selectUserHandler}" />
</p:selectOneMenu>
</f:facet>
</p:menubar>
</h:form>
<ui:insert name="bodyContent" />
Thanks in advance for any hints.

Invoking p:dataExporter in p:contextMenu

I want to use dataExporter as onclick action in my right-click contextMenu.
Sadly, I have no idea how to manage this :(
dataExporter(simple export table date to XLS) and contextMenu are binded to the same dataTable.
here's the code:
<p:contextMenu for = "tableForm">
<p:menuitem value="View" icon="ui-icon-search"/>
<p:menuitem value="Delete" icon="ui-icon-close" />
</p:contextMenu>
<p:commandLink ajax="false" width="24">
<p:graphicImage value="/resources/images/Excel-icon.png" />
<p:dataExporter type="xls" target="dataTable"
fileName="daneCentrumDataTable" />
</p:commandLink>
Anyone knows how to do this?
Following #Kukeltje idea something like this:
<p:contextMenu for="dataTable">
<p:menuitem value="View" icon="ui-icon-search"/>
<p:menuitem value="Delete" icon="ui-icon-close" />
<p:menuitem value="Export" onclick="$('#export').click()" />
</p:contextMenu>
<div style="display: none;">
<p:commandLink id="export" ajax="false" width="24">
<p:dataExporter type="xls" target="dataTable" fileName="daneCentrumDataTable" />
</p:commandLink>
</div>
P.S.: My h:form has prependId="false"

Displaying menu with panelgrid rendered

My Below code display menu based on if not database is empty, my problem is, it displays the second submenu but does not display the first one. i have got same validation on both
<h:panelGrid rendered="#{not empty dataBase}" width="100%">
<h:form>
<p:menubar style="height: 25px;background-color: #9999ff" >
<h:panelGrid rendered="#{not empty rights}" >
<p:submenu label="Master" >
<p:menuitem value="Client" url="test.xhtml" />
<p:menuitem value="TaxMaster" url="test.xhtml" />
<p:menuitem value="Quotation" url="test.xhtml" />
<p:separator />
<p:menuitem value="Area" url="test.xhtml" />
</p:submenu>
</h:panelGrid>
<p:submenu label="Back Office" icon="ui-icon-pencil">
<p:submenu label="Book Issue" icon="ui-icon-contact">
<p:menuitem value="Add" url="BookIssue_Add.xhtml" />
<p:menuitem value="Edit" url="BookIssue_Edit.xhtml" />
<p:menuitem value="View" url="test.xhtml" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
</h:panelGrid>
<p:submenu/> must be child of <p:menubar/> otherwise it wont be rendered

Different Context menu on each node of tree

In my JSF project I want to display different context menu on every node of tree based on some conditions (To be precise some permissions)
Present according to my xhtml, I have binded context menu with the tree so I am getting same menu on every node of the tree.
Here is the code:
<p:contextMenu for="TreeID">
<p:menuitem value="Create" update=":centerPanel" actionListener="#{someBean.createPrivilege}" onstart="statusDialog.show();"
oncomplete="statusDialog.hide();" />
<p:menuitem value="Edit" update=":commonDialog :centerPanel" actionListener="#{someBean.editPrivilege}"
onstart="statusDialog.show();" oncomplete="statusDialog.hide();" />
<p:menuitem value="Delete" onstart="delPrivilegeConfirmDialog.show();" />
</p:contextMenu>
<p:scrollPanel mode="native" styleClass="scroll-panel">
<p:tree id="TreeID" value="root" var="node" selectionMode="single"
selection="#{someBean.selectedNode}" dynamic="true">
<p:ajax listener="#{someBean.onNodeSelect}" update=":centerPanel" event="select" onstart="statusDialog.show();"
oncomplete="statusDialog.hide();" />
<p:treeNode id="someID">
<h:outputText value="#{node}" id="lblNode" />
</p:treeNode>
</p:tree>
</p:scrollPanel>
But according to my requirement I want different context menu on every node, basically I have 3 options in my context menu like Create, Edit , Delete.. then I need to hide 1 or 2 option on every node based on certain conditions.
How would I do that?
Thanks in advance.
Assuming that you are using PrimeFaces, recent versions provide the option to set different context menus for different node types using the "nodeType" attribute:
<p:contextMenu for="TreeID" nodeType="type1">
<p:menuitem value="Create" update=":centerPanel" actionListener="#{someBean.createPrivilege}" onstart="statusDialog.show();"
oncomplete="statusDialog.hide();" />
<p:menuitem value="Edit" update=":commonDialog :centerPanel" actionListener="#{someBean.editPrivilege}"
onstart="statusDialog.show();" oncomplete="statusDialog.hide();" />
<p:menuitem value="Delete" onstart="delPrivilegeConfirmDialog.show();" />
</p:contextMenu>
<p:contextMenu for="TreeID" nodeType="type2">
<!-- Other menu items -->
</p:contextMenu>
<p:scrollPanel mode="native" styleClass="scroll-panel">
<p:tree id="TreeID" value="root" var="node" selectionMode="single"
selection="#{someBean.selectedNode}" dynamic="true">
<p:ajax listener="#{someBean.onNodeSelect}" update=":centerPanel" event="select" onstart="statusDialog.show();"
oncomplete="statusDialog.hide();" />
<p:treeNode id="someID" type="type1">
<h:outputText value="#{node}" id="lblNode" />
</p:treeNode>
<p:treeNode id="someID" type="type2">
<h:outputText value="#{node}" id="lblNode" />
</p:treeNode>
</p:tree>
</p:scrollPanel>
Just keep in mind that you need to set the node type for all nodes generated by the model:
TreeNode x = new DefaultTreeNode("type1", data, parent);

Resources