Highlights: ContextMenu not showing up in overlayPanel

Question

I am trying to add contextMenu to a tree to perform a custom action. This tree is implemented inside the floor panel. I noticed that contextMenu appears only in random situations, for example, after selecting and deselecting some elements in the tree. Any idea?

<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" widgetVar="advancedSearchPanelWidgetVar" > <ui:include src="/search/advancedSearch-form.xhtml"/> </p:overlayPanel> 

advancedSearch form

 <p:panelGrid id="panelAdvanced" styleClass="borderless"> ... <p:row> <p:column colspan="4"> <p:outputLabel value="#{text['searchForm.classifiers']}" for="treeClassifier" styleClass="paddingLabelGrid"/> <p:contextMenu id="contextSearch" for="treeClassifier"> <p:menuitem value="Escolha todos" update=":searchForm:treeClassifier" actionListener="#{navBarController.displaySelectedSingle}"/> </p:contextMenu> <p:tree id="treeClassifier" value="#{navBarController.rootClassifier}" var="node" selectionMode="checkbox" selection="#{navBarController.selectedClassifiers}" style="height: 200px;width: 540px; margin-bottom: 0px; overflow: auto" propagateSelectionDown="false" propagateSelectionUp="false"> <p:ajax event="select" update=":searchForm:btnSearch"/> <p:ajax event="unselect" update=":searchForm:btnSearch"/> <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> <h:outputText value="#{node.description}(#{node.code})"/> </p:treeNode> </p:tree> </p:column> </p:row> ... 

Answer 1

Try:

my advancedSearch-form.xhtml

 <?xml version="1.0" encoding="UTF-8" ?> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"> <h:form id="searchForm"> <p:panelGrid id="panelAdvanced" styleClass="borderless"> <p:row> <p:column colspan="4"> <p:contextMenu id="contextSearch" for="treeClassifier"> <p:menuitem value="Escolha todos" update="treeClassifier" actionListener="#{treeView.displaySelectedSingle}"/> </p:contextMenu> <p:tree id="treeClassifier" value="#{treeView.root}" var="node" selectionMode="checkbox" selection="#{treeView.selectedClassifiers}" style="height: 200px;width: 540px; margin-bottom: 0px; overflow: auto" propagateSelectionDown="false" propagateSelectionUp="false"> <p:ajax event="select" global="false" listener="#{treeView.reset}" /> <p:ajax event="unselect" global="false" listener="#{treeView.reset}" /> <p:ajax event="contextMenu" global="false" listener="#{treeView.onContextMenu}"/> <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> <h:outputText value="#{node.nodeName}"/> </p:treeNode> </p:tree> </p:column> </p:row> </p:panelGrid> </h:form> </ui:composition> 

And my bean:

 @Component(value="treeView") @Scope(value = "session") public class TreeView implements Serializable { private TreeNode[] selectedClassifiers; public TreeNode[] getSelectedClassifiers() { return selectedClassifiers; } public void setSelectedClassifiers(TreeNode[] selectedClassifiers) { this.selectedClassifiers = selectedClassifiers; } private TreeNode selectedClassifier; public void reset(){ selectedClassifier = null; } public void displaySelectedSingle(){ if(selectedClassifier != null){ List<TreeNode> selected = new ArrayList<TreeNode>(); for(int i=0; i < selectedClassifiers.length; i++){ selected.add(selectedClassifiers[i]); if(selectedClassifiers[i].equals(selectedClassifier)) selected.addAll(selectionRecursive(selectedClassifier)); } selectedClassifiers = selected.toArray(new TreeNode[selected.size()]); } } public void onContextMenu(NodeSelectEvent event){ selectedClassifier = event.getTreeNode(); } public List<TreeNode> selectionRecursive(TreeNode node){ List<TreeNode> selected = node.getChildren(); for(TreeNode child : node.getChildren()){ selected.addAll(selectionRecursive(child)); child.setSelected(true); } return selected; } } 

Choosing a method of Recursive (TreeNode node) requires debugging, but in my case everything works fine.

Answer 2

I'm not sure what you really want to achieve, but:

You use two functions of the tree component.

• Select checkbox (multiple)
• Context menu on nodes

Using both functions at the same time is not supported by bt. Whenever you right-click on a node, a context menu appears, then the node is selected / deselected. The context menu is not displayed if you go beyond the node (the background of the container or between nodes)

If you need a single contextMenu for the entire tree (e.g. Select All, Unselect All, Select any ...), just remove the attribute for in contextMenu:

instead:

 <p:contextMenu id="contextSearch" for="treeClassifier"> 

just write

 <p:contextMenu id="contextSearch"> 

Thus, contextMenu appears wherever you right-click on the container ( p:column in your case).