False representation with o:tree and p:panelGrid

Question

I want to build a tree which has p:oanelGrid as nodes. Like this:

<o:tree value="#{plannedElementsBean.tree}" var="item">
    <o:treeNode level="0">
        <o:treeNodeItem>
            <p:panelGrid columns="6">
                <f:facet name="header">
                    <h:outputText value="Header" />
                </f:facet>

                <o:treeInsertChildren />

                <p:panel><h:outputText value="Inner" /></p:panel>

                <f:facet name="footer">
                    <h:outputText value="Footer" />
                </f:facet>
            </p:panelGrid>                            
        </o:treeNodeItem>
    </o:treeNode>
</o:tree>

The problem is, that the vertical lines between the children are missing. p:panelGrid renders vertical lines between its children. And I tested it, with static markup. But all the children inserted by the o:tree are treated as if they where the first child, and thus rendered into the first part, while the inner panel is rendered into a second part, divided by a vertical line. I would like to have all inserted children and the inner panel be divided by a vertical line. What is going wrong here?

score 2 · Accepted Answer · edited May 23 '17 at 11:57

This is indeed expected behavior. The <o:tree> and friends are UI components like <ui:repeat> and not tag handlers like <c:forEach>. The <p:panelGrid> renders a <td> per UI component child.

You seem to think that <o:tree> (and equivalently <ui:repeat>) recursively generates multiple JSF components which end up in place of <o:treeInsertChildren>. This is not true. There's really physically only one JSF component in the component tree which repeatedly generates its HTML output depending on the current iteration state. There's physically only one <o:treeInsertChildren> component whose all the HTML output ends up in a single <td> of <p:panelGrid>.

Your best bet is just using left-floating divs with a fixed width of 16% so that they break to next line after each 6 items. Note that you can easily reuse PrimeFaces standard CSS classes on plain HTML elements, if necessary.

False representation with o:tree and p:panelGrid

1 Answers1

See also: