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
Related
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" />
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"
I have a primefaces menu which items are disabled on a condition from backing bean.
The problem is, that the conditions are processed after the update.
If I select a node which has every item enabled and switch to a node where everything is disabled,
the menu is reloaded but shows everything enabled for a second before the items are disabled.
Is there a way to process the disabled-conditions before the menu is shown?
<h:form id="form">
<p:tree id="tree" ...>
<p:ajax event="select" update=":form:tree:menu" listener...>
<p:treeNode id="treenode">
<p:commandButton id="btn" type="button" />
<p:overlayPanel for="btn">
<p:menu id=menu">
<p:menuitem .... disabled="#{bean.condition1}" />
<p:menuitem .... disabled="#{bean.condition2}" />
...
</p:menu>
</p:overlayPanel>
</p:treenode>
</p:tree>
EDITED
Hide the menu items at the beggining of the ajax call and show them when it is completed. The source code in the page would be:
<p:tree id="tree" value="#{bean.root}" var="node" selectionMode="checkbox">
<p:treeNode id="treenode">
<p:commandButton id="btn" value="#{node}"
onstart="$('.ui-overlaypanel-content').css('display','none');"
oncomplete="$('.ui-overlaypanel-content').css('display','block');"
actionListener="#{bean.processAndUpdateConditions}" update="mymenu"/>
<p:overlayPanel for="btn">
<p:menu id="mymenu" >
<p:menuitem value="Condition 1" disabled="#{bean.condition1}" />
<p:menuitem value="Condition 2" disabled="#{bean.condition2}" />
</p:menu>
</p:overlayPanel>
</p:treeNode>
</p:tree>
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>
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);