Collapse sibling nodes onExpandNode event in Tree (3.0)

[PommePote]

Hi everyone !
After searching on Google & cie, I can't find the way to collapse siblings nodes when expanding a node.

#EDIT : Tried on 3.0, here my code :
JSF file (xhtml) :

Code: Select all

   <h:form id="indicators-form" prependId="true">
        <p:tree id="indicators-tree" 
                value="#{indicatorsBean.treeMenu}" var="node"
                selectionMode="single" selection="#{indicatorsBean.selectedNode}" 
                dynamic="true" cache="false">
            
              <p:ajax event="expand" listener="#{indicatorsBean.collapseSiblings}" />
            
              <p:treeNode>
                  <h:outputText value="#{node}" />
              </p:treeNode>
        </p:tree>
    </h:form>

SessionScoped ManagedBean :

Code: Select all

@Component
@ManagedBean(name="indicatorsBean")
@SessionScoped
public class IndicatorsBean implements Serializable {
    private TreeNode treeNode;
    private TreeNode selectedNode;
    ...

    public void collapseSiblings(NodeExpandEvent pExpandEvent) {
	   System.out.println("CollapseSiblings : " + pExpandEvent.getTreeNode().getData());
	   TreeNode tSelectedNode = pExpandEvent.getTreeNode();
	
	   for (TreeNode fTreeNode : tSelectedNode.getParent().getChildren()) {
	          if (!fTreeNode.equals(tSelectedNode)) {
		         fTreeNode.setExpanded(false);
	          }
	   }
    }

    ...
}

Here is what I tried : (old code in 2.2.1).
JSF file (xhtml) :

Code: Select all

<h:form id="indicators-form" prependId="false">
    <p:tree id="indicators-tree" 
            value="#{indicatorsBean.treeMenu}" var="node"
            selectionMode="single" selection="#{indicatorsBean.selectedNode}" 
            dynamic="true" cache="false"
            nodeExpandListener="#{indicatorsBean.collapseSiblings}"
            nodeSelectListener="#{indicatorsBean.redirect}">
        <p:treeNode>
            <h:outputText value="#{node}" />
        </p:treeNode>
    </p:tree>
</h:form>

SessionScoped ManagedBean :

Code: Select all

@Component
@ManagedBean(name="indicatorsBean")
@SessionScoped
public class IndicatorsBean implements Serializable {
    private TreeNode treeNode;
    private TreeNode selectedNode;
    ...

    public void collapseSiblings(NodeExpandEvent pExpandEvent) {
	   System.out.println("CollapseSiblings : " + pExpandEvent.getTreeNode().getData());
	   TreeNode tSelectedNode = pExpandEvent.getTreeNode();
	
	   for (TreeNode fTreeNode : tSelectedNode.getParent().getChildren()) {
	          if (!fTreeNode.equals(tSelectedNode)) {
		         fTreeNode.setExpanded(false);
	          }
	   }
    }

    ...
}

But this don't work. But when I try to add a TreeNode, this works.
My thought is that only the just-expanded node is re-renderer.

I also try to "force" the partial update, with :

Code: Select all

RequestContext.getCurrentInstance().addPartialUpdateTarget("indicators-tree");

Do you have others ideas ?

Thanks you !
PS : I'm using PrimeFaces 2.2.1 on Mojarra 2.1.3

[cagatay.civici]

Tree of 3 is a new tree and 2.x is not support anymore.

[PommePote]

Okay thank you optimus.prime.

I'll try to do it using v3 and i'll post my solution then.

[PommePote]

Okay here what I try using PrimeFaces v3.0 :

Tried on 3.0, here my code :
JSF file (xhtml) :

Code: Select all

   <h:form id="indicators-form" prependId="true">
        <p:tree id="indicators-tree" 
                value="#{indicatorsBean.treeMenu}" var="node"
                selectionMode="single" selection="#{indicatorsBean.selectedNode}" 
                dynamic="true" cache="false">
            
              <p:ajax event="expand" listener="#{indicatorsBean.collapseSiblings}" />
            
              <p:treeNode>
                  <h:outputText value="#{node}" />
              </p:treeNode>
        </p:tree>
    </h:form>

SessionScoped ManagedBean :

Code: Select all

@Component
@ManagedBean(name="indicatorsBean")
@SessionScoped
public class IndicatorsBean implements Serializable {
    private TreeNode treeNode;
    private TreeNode selectedNode;
    ...

    public void collapseSiblings(NodeExpandEvent pExpandEvent) {
	   System.out.println("CollapseSiblings : " + pExpandEvent.getTreeNode().getData());
	   TreeNode tSelectedNode = pExpandEvent.getTreeNode();
	
	   for (TreeNode fTreeNode : tSelectedNode.getParent().getChildren()) {
	          if (!fTreeNode.equals(tSelectedNode)) {
		         fTreeNode.setExpanded(false);
	          }
	   }
    }

    ...
}

When I reload the page manually, the result is correct, so datas have been updated correctly.

Always the same problem, the Tree is not refresh in entire, it's the just-expanded node which is rendered.
Do I have to do it with jQuery ?

Thank in advance,
PommePote

[garethwebbley]

I haven't used the tree component but have you tried adding an update="" to the p:ajax element?

Code: Select all

<p:ajax event="expand" listener="#{indicatorsBean.collapseSiblings}" update="tree-id or :path:to:tree-id" />

[PommePote]

Hi garethwebbley,
Yes I also try to add the update attribute on the ajax tag.
But on the Ajax response, I just see the tags for the current node (on which I clicked) and not the entire tree.

So maybe it's the normal behaviour of the tree component.

Thanks !