java - org - Primefaces: ContextMenu no aparece en overlayPanel

sidebar primefaces

Question

Intento agregar un contextMenu en un árbol para realizar una acción personalizada. Este árbol se implementa dentro de un panel superpuesto. Lo que observé es que el contexto de menú solo aparece en situaciones aleatorias, como después de seleccionar y deseleccionar algunos elementos en el árbol. ¿Alguna 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

No estoy seguro de lo que realmente quieres lograr, pero:

Está utilizando 2 características del componente árbol.

• Casilla de verificación (múltiple) selección
• Menú contextual en los nodos

El uso de ambas funciones al mismo tiempo no se admite actualmente bt Primefaces. Siempre que haga clic con el botón derecho en un nodo, se mostrará el menú contextual, luego se seleccionará / deseleccionará el nodo. El contextoMenú no aparece si hace clic fuera de un nodo (fondo del contenedor o entre nodos)

Si desea un único contextoMenú para todo el árbol (es decir, Seleccionar todo, Deseleccionar todo, Seleccionar lo que sea ...), simplemente elimine el atributo for en contextMenu :

en lugar de :

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

solo escribe

<p:contextMenu id="contextSearch">

De esta forma, el menú contextual aparece siempre que haga clic con el botón derecho en el contenedor ( p:column en su caso).

Answer 2

Intenta así:

mi 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>

Y mi frijol:

@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;
    }
}

La selección de método Recursive (nodo TreeNode) necesita depuración, pero en mi caso todo funciona bien.