2 Replies Latest reply on Mar 10, 2010 10:30 PM by cbensemann

    Tree & contextMenu & rightclickselection

    cbensemann

      Hi,

       

      There have been numerous posts on the forums about adding context menus to trees but I have got myself totally lost and cannot get this to work the way I want.

       

      What I would like to happen:

      When a user right clicks on a node or leaf on the tree the node is selected and then the context menu is shown for the user which has options to add new nodes or edit the existing (selected one)

       

      I have attempted various things but here is the code as I think it should work:

      <rich:tree id="allCorrectiveActionsTree" toggleOnClick="true" ajaxKeys="#{null}"
          rightClickSelection="true" ajaxSubmitSelection="true"
          nodeSelectListener="#{manageCorrectiveActionsController.processSelection}"
          dropListener="#{manageCorrectiveActionsController.dropListener}" dragIndicator="indicator">
          <rich:recursiveTreeNodesAdaptor roots="#{root}" nodes="#{caTreeNode.children}" var="caTreeNode">
              <rich:treeNodesAdaptor nodes="#{caTreeNode.correctiveActions}" var="action">
                  <rich:treeNode dragType="leaf">
                      <h:outputText id="leafLabel" value="#{action.title}" />
                      <rich:dndParam name="label" value="#{action.title}" type="drag" />
                      <rich:contextMenu submitMode="none">
                          <rich:menuItem value="#{messages.button_delete}"
                              onclick="#{rich:component('deleteConfirmationPanel')}.show();" />
                      </rich:contextMenu>
                  </rich:treeNode>
              </rich:treeNodesAdaptor>
              <rich:treeNode id="nodeNode" icon="/a4j/g/3_3_3.CR1images/iconFolder.gif"
                  iconLeaf="/a4j/g/3_3_3.CR1images/iconFolder.gif" acceptedTypes="node, leaf" dragType="node">
                  <h:outputText id="nodeLabel" value="#{caTreeNode.title}" />
                  <rich:dndParam name="label" value="#{caTreeNode.title}" type="drag" />
                  <rich:contextMenu id="nodeContextMenu" submitMode="none">
                      <rich:menuItem value="#{messages.manage_corrective_actions_add_new_node}" id="newNode"
                          onclick="setSelection(event); #{rich:component('newNodePanel')}.show();" />
                      <rich:menuItem value="#{messages.manage_corrective_actions_add_new_leaf}" id="newLeaf"
                          onclick="#{rich:component('newLeafPanel')}.show();" onselect="setSelection(event)" />
                      <rich:menuItem value="#{messages.button_delete}" id="delete"
                          onclick="#{rich:component('deleteConfirmationPanel')}.show();"
                          onselect="setSelection(event)" />
                  </rich:contextMenu>
              </rich:treeNode>
          </rich:recursiveTreeNodesAdaptor>
      </rich:tree>
      

       

      What seems to happen is the right click selection is processed and then no menu appears. Without rightclickselection enabled the menu appears but obviously the node is not selected.

       

      I know I'm missing something simple but I've stared at this code for a long time without being able to make it work so its time I got a second opinion.

       

      thanks

      Craig

        • 1. Re: Tree & contextMenu & rightclickselection
          peterlen

          I have a tree which has a different context menu for a folder and one for a leaf.  Obviously my backing bean is different than what you have, but this xhtml code is working fine and is doing what I think you are asking for (I also have drag and drop enabled with it):

           

          <rich:tree id=

          "ftree" showConnectingLines="true" rightClickSelection="true" switchType="client" value="#{DataFolders.dataFoldersTree}" var="treedata" nodeFace="#{treedata.type}" nodeSelectListener="#{DataFolders.processTreeSelection}" ajaxSubmitSelection="true" dropListener="#{DataFolders.dropListener}" dragIndicator="indicator1" data="#{DataFolders.responseMessage}" oncomplete="showA4JResponseMessage(data)" >

           

          <rich:treeNode type=

          "nodata" >

          <h:outputText value=

          "#{treedata.label}" />

          </rich:treeNode>

           

           

          <rich:treeNode type=

          "oplfolder" iconLeaf="/img/treeFolder.gif" dragType="dndfolder" acceptedTypes="dndfolder,dndopl">

          <!-- The dndParam value is used

          for the dragIndicator -->

          <rich:dndParam name=

          "label" type="drag">#{treedata.label}</rich:dndParam>

          <h:outputText value=

          "#{treedata.label}" />

          <rich:contextMenu event=

          "oncontextmenu" submitMode="none">

          <rich:menuItem value=

          "Edit" onclick="openOPLFolderPanel(false, '#{treedata.refid}', '#{treedata.label}')"/>

          <rich:menuItem value=

          "Add Subfolder" onclick="openOPLFolderPanel(true, '#{treedata.refid}', '')"/>

          <rich:menuItem value=

          "Delete"

          submitMode=

          "ajax"

          action=

          "#{DataFolders.deleteDataFromTree}"

          oncomplete=

          "repositionDrawingToolbar()"

          limitToList=

          "true"

          reRender=

          "ftree">

          <a:actionparam name=

          "dopl" value="#{treedata.refid}" assignTo="#{DataFolders.deleteDataRefid}" noEscape="false"/>

          <a:actionparam name=

          "dopl2" value="false" assignTo="#{DataFolders.isFromDnD}" noEscape="false"/>

          </rich:menuItem>

          </rich:contextMenu>

          </rich:treeNode>

           

           

          <rich:treeNode type=

          "opl" dragType="dndopl">

          <!-- The dndParam value is used

          for the dragIndicator -->

          <rich:dndParam name=

          "label" type="drag">#{treedata.label}</rich:dndParam>

          <a onclick=

          "handleOPLTreeClick('#{treedata.refid}')">

          <h:outputText value=

          "#{treedata.label}" />

          </a>

          <rich:contextMenu event=

          "oncontextmenu" submitMode="none">

          <rich:menuItem value=

          "Edit" onclick="openOPLPanel(false, '#{treedata.refid}', '#{treedata.label}')"/>

          <rich:menuItem value=

          "Display Toolbar" onclick="displayDrawingToolbar('#{treedata.refid}')"/>

          <rich:menuItem value=

          "Delete"

          submitMode=

          "ajax"

          action=

          "#{DataFolders.deleteDataFromTree}"

          oncomplete=

          "repositionDrawingToolbar()"

          limitToList=

          "true"

          reRender=

          "ftree">

          <a:actionparam name=

          "dopl" value="#{treedata.refid}" assignTo="#{DataFolders.deleteDataRefid}" noEscape="false"/>

          <a:actionparam name=

          "dopl2" value="false" assignTo="#{DataFolders.isFromDnD}" noEscape="false"/>

          </rich:menuItem>

          </rich:contextMenu>

          </rich:treeNode>

           

           

           

          </rich:tree>

          • 2. Re: Tree & contextMenu & rightclickselection
            cbensemann

            Thanks for the quick reply. Looking at your code I was struggling to see any significant difference between my code and yours so I did something I should have done hours ago. I checked it in another browser. It seems that this works fine in windows with both firefox and IE but does not work (menu not shown) in firefox OS X (which is my main development env).

             

            Thanks for being a sounding board for this issue.

            Craig