3 Replies Latest reply on Dec 19, 2012 12:12 PM by tine2k

    rich:contextMenu clipped by the parent tree node

    pzmarlicki
    pzmarlicki Jun 12, 2012 10:06 AM

      I'm working on migration if the following code from RichFaces 3.3 to 4.2.2:

      <rich:tree id="myTree" switchType="ajax">

        <rich:recursiveTreeNodesAdaptor roots="#{myBean.treeRoots}" var="node" nodes="#{node.childNodes}">

            <rich:treeNode changeExpandListener="#{node.onNodeExpand}">

                <h:panelGrid columns="2" border="0" cellpadding="0px" cellspacing="0px">

                    <h:graphicImage value="/images/data_icon.gif" />

                    <h:outputText value="#{node.data.id}" />

                </h:panelGrid>

                <rich:contextMenu attached="true" submitMode="server">

                    <rich:menuItem value="#{node.data.id}" disabled="true"/>

                    <rich:menuItem value="Show" action="#{myBean.show}">

                        <f:param name="itemId" value="#{node.data.id}" />

                    </rich:menuItem>

                </rich:contextMenu>

            </rich:treeNode>

        </rich:recursiveTreeNodesAdaptor>

      </rich:tree>

       

      Here is a close approximation of what I ended up with for RF 4.2.2:

            <rich:tree id="tree" var="node"

                       toggleType="ajax" toggleListener="#{node.onNodeToggle}"

                       selectionType="ajax" selectionChangeListener="#{myBean.onNodeSelection}">

                <rich:treeModelRecursiveAdaptor roots="#{myBean.treeRoots}" nodes="#{node.childNodes}">

                    <rich:treeNode id="treeNode">

                        <h:panelGrid columns="2" border="0" cellpadding="0px" cellspacing="0px">

                            <h:graphicImage value="/images/data_icon.gif" />

                            <h:outputText value="#{node.data.id}" />

                        </h:panelGrid>

                        <rich:contextMenu attached="true" target="treeNode" mode="ajax">

                            <rich:menuItem label="#{node.data.id}" disabled="true"/>

                            <rich:menuItem label="Show" mode="server" action="#{myBean.show}"/>

                        </rich:contextMenu>

                    </rich:treeNode>

                </rich:treeModelRecursiveAdaptor>

            </rich:tree>

       

       

      In RF 4.2.2 version, I see some issues at run time:

      1. When the context menu coded as above is rendered, it is clipped by the borders of its parent tree node, so I can only see a narrow band corresponding to the topmost portion of the menu.  I see enough to verify that the label of the first menu item has correct value
      2. If I move rich:contextMenu to outside of rich:tree, the menu is rendered only at the initial right-click.  After that, I see only the browser's context menu.  After some experimentation,  I've added render="@form" to rich:treeNode.  Now the menu is rendered on all clicks, but the first element is empty, because #{node} has no meaning outside of rich:tree, where it is defined.  Assuming that I can't change the displayed menu items, this rules out menu location outside of the rich:tree.
      3. In both cases, I still get an occasional script error 'this.popup' is null or not an object, after expanding a tree node.

       

      What I'm looking for is an idea on how to resolve the clipping of the menu in #1 above, while eliminating errors in #3.  This was a breeze to code in RichFaces 3.3, so it seems like I must be missing something in the new code, because it's not working so far.