CODEWITHSUNDEEP
jsfprimefacesexpandtreetable
BenMansourNizar
BenMansourNizar

Reputation: 1628

How to expand all the nodes of treeTable?

I have a tree table and two buttons:

but they don't work. At the backing bean I did root.setExpanded(true); and root.setExpanded(false); but it doesn't work.

<center>
    <p:treeTable value="#{roleMB.root}" var="roleTreeTableVar"
        binding="#{roleMB.treeTable}" id="roleTreeTable">
        <f:facet name="header">
            <center>
                <p:commandButton value="Réduire tout"
                    icon="ui-icon-folder-collapsed" style="font-size: 0.9em" 
                    actionListener="#{roleMB.expandAll}" 
                    update=":roleTreeTableForm:roleTreeTable"  />
                <p:spacer width="30px" />
                <p:commandButton value="Développer tout"
                    icon="ui-icon-folder-open" style="font-size: 0.9em"  
                    actionListener="#{roleMB.collapseAll}" 
                    update=":roleTreeTableForm:roleTreeTable"  />
                <p:spacer width="30px" />
            </center>
        </f:facet>

        <p:column style="width:150px">
            <f:facet name="header"> 
                Nom de Role 
            </f:facet>
            <h:outputText value="#{roleTreeTableVar.nom}" />
        </p:column>

        <p:column style="width:100px">
            <f:facet name="header"> 
                Id de role 
            </f:facet>
            <h:outputText value="#{roleTreeTableVar.id}" />
        </p:column>

        <p:column style="width:20px">
            <p:commandLink oncomplete="dlgAddRole.show()" value="Ajouter"
                update=":addRoleForm:selectRolesNamesId">
                <f:setPropertyActionListener value="#{roleTreeTableVar}"
                    target="#{roleMB.selectedRole}" />
            </p:commandLink>
            <p:commandLink oncomplete="delRole.show()" value="Supprimer">
                <f:setPropertyActionListener value="#{roleTreeTableVar}"
                    target="#{roleMB.selectedRole}" />
            </p:commandLink>
            <p:commandLink oncomplete="editRole.show()" value="Modifier">
                <f:setPropertyActionListener value="#{roleTreeTableVar}"
                    target="#{roleMB.selectedRole}" />
            </p:commandLink>
        </p:column>
    </p:treeTable>
</center>

Upvotes: 19

Views: 32764

Answers (5)

Gerardo Alan
Gerardo Alan

Reputation: 1

Using PrimeNG 15 and TreeTable Component

toogleAllNodes(nodeList: TreeNode[], expand: boolean): void {
    nodeList?.forEach(node => {
        node.expanded = expand; // expand or collapse node
        if (node.children?.length) {
            this.toogleAllNodes(node.children, expand);
        }
    });
}

openAllNodes() {
    this.toogleAllNodes(this.grid, true);
    this.grid = [...this.grid]; // Update tree in HTML
}

closeAllNodes() {
    this.toogleAllNodes(this.grid, false);
    this.grid = [...this.grid]; // Update tree in HTML
}

Upvotes: 0

Jens Piegsa
Jens Piegsa

Reputation: 7495

A possible solution might look this:

view.xhtml 
<h:form id="form">
    ...
    <p:commandButton update=":form:tree" actionListener="#{view.collapseAll}"
            icon="fa fa-minus" title="#{msg.collapseAll}"/>                             
    <p:commandButton update=":form:tree" actionListener="#{view.expandAll}"
            icon="fa fa-plus" title="#{msg.expandAll}"/>
    ...
    <p:treeTable id="tree" ...>
    ...
    </p:treeTable>
    ...
</h:form>
View.java 
@Named
@ViewScoped
public class View implements Serializable {

    private TreeNode root;

    ...

    public void collapseAll() {
        setExpandedRecursively(root, false);
    }

    public void expandAll() {
        setExpandedRecursively(root, true);
    }

    private void setExpandedRecursively(final TreeNode node, final boolean expanded) {
        for (final TreeNode child : node.getChildren()) {
            setExpandedRecursively(child, expanded);
        }
        node.setExpanded(expanded);
    }
}

Upvotes: 5

user3602070
user3602070

Reputation: 41

For question: "how can this be realized?" In code...

public void reloadTree() {


    assocRoot = new DefaultTreeNode();
    assocRoot.setExpanded(true);

    TreeNode currentAssocNode;
    AbstractDocument parentAssoc = getParentDocAssociation();
    if(parentAssoc !=null) {
        TreeNode parentAssocNode = new DefaultTreeNode(parentAssoc);
        parentAssocNode.setExpanded(true);
....

Upvotes: -1

fperez
fperez

Reputation: 502

This is recursive method for Collapse and Expande.

public void collapsingORexpanding(TreeNode n, boolean option) {
    if(n.getChildren().size() == 0) {
        n.setSelected(false);
    }
    else {
        for(TreeNode s: n.getChildren()) {
            collapsingORexpanding(s, option);
        }
        n.setExpanded(option);
        n.setSelected(false);
    }
}
  • The variable n is the node than you want to expand or colapse.
  • When The variable option is false, all children of the n is collapse, in the another case, is expanded
  • setSelected(false) indicate than this node isn't selected

Upvotes: 21

alpha2011
alpha2011

Reputation: 365

You should set the expanded property to true not just for the root node but for all the children nodes as well.

Upvotes: 8

Related Questions