Expand Primefaces Tree on selection

Question

I'm using Primefaces 6.1. The creation of the tree works fine, it also reacts on expanding the tree while clicking the triangle on the left. It also fires the event when clicking the node. But.... I would like to expand the tree when clicking the node. I'm not able to bring this to work.

This is the tree-code snippet:

<p:tree id="tree"
        value="#{managedBeanFolder.root}"
        var="node"
        styleClass="tree-noborder"
        selectionMode="single">
    <p:ajax update=":folderListe:docListLatest" event="select" listener="#{managedBeanFolder.onNodeSelectListe}"/>
    <p:treeNode>
        <h:outputText value="#{node}" style="border:none" />
    </p:treeNode>
</p:tree>

My ViewScoped ManagedBean looks like this

public void onNodeSelectListe(NodeSelectEvent event) {
    RequestContext context = RequestContext.getCurrentInstance();
    TreeNode selectedNode = (TreeNode) event.getTreeNode();
    if (selectedNode != null) {
        if (selectedNode.getChildCount() > 0) {
            if (selectedNode.isExpanded()) {
                selectedNode.setExpanded(false);
                context.update("folderListe:tree");
            } else {
                selectedNode.setExpanded(true);
                context.update("folderListe:tree");
            }
        }
    }
}

I have checked, the code is executed. When I expand the tree by clicking the triangle, selectedNode.isExpanded() is true, when I collapse by clicking the triangle, the value is false. But the website is not updated.

What is wrong? Many thanks

Answer 1

You need to update the tree:

<p:ajax update=":folderListe:docListLatest @this"

Answer 2

I was able to solve this issue. By changing the JSF-part and the managed bean. This is my JSF-Part:

<p:tree id="tree"
        value="#{managedBeanFolder.root}" 
        var="node" 
        style="border: none; width:300px; float: left; color: red; font-size: 102%;line-height: 1.847;" 
        styleClass="tree-noborder"          
        selectionMode="single"
        >                              
        <p:ajax update="folderListe:docListLatest, folderListe:tree" 
                event="select" 
                listener="#{managedBeanFolder.onNodeSelectListe}"   
                process="tree"/>                
       <p:treeNode>   
                <h:outputText value="#{node}" style="border: none" />
       </p:treeNode>
</p:tree>

The ID of my form is 'folderListe' and 'docListLatest' is a datatable being refreshed by clicking the node.

Within my managed bean I have this listener:

public void onNodeSelectListe(NodeSelectEvent event) {
    RequestContext context = RequestContext.getCurrentInstance();
    TreeNode selectedNodeLocal = (TreeNode) event.getTreeNode();

    selectedNode = selectedNodeLocal;

    if (selectedNode != null) {
        if (selectedNode.getChildCount() > 0) {
            if (selectedNode.isExpanded()) {
                selectedNode.setExpanded(false);
                context.update("folderListe:tree");
            } else {
                selectedNode.setExpanded(true);
                context.update("folderListe:tree");
            }
        }
    }
    int folder = (int) folderIden.get(selectedNode.getRowKey());
    setFolderID(folder);
    setFolderName(selectedNode.toString());
    context.update("folderListe:docListLatest");        

    // application specific things to remember
    SharedObjects so = new SharedObjects();
    so.setFolderID(folder);
    getManagedBeanWebdokument().setFolderID(folderID);
    getManagedBeanWebdokument().setFolderName(getFolderName());

}

And all of a sudden, it did what I wanted it to do:-)