Saturday, June 21, 2014

Expand/Collapse Tree Structure

Following post will help you to expand/collapse Tree Structure programmatically.

Create a tree structure surrounded by panel collection and having two buttons in panel collection tool bar to perform expand/collapse operations.

          <af:panelCollection id="pc1" styleClass="AFStretchWidth">
            <f:facet name="toolbar">
              <af:toolbar id="t1">
                <af:commandToolbarButton text="Expand All" id="cbb2"
                                         actionListener="#{empBean.expandEmpTreeTable}"
                                         disabled="#{bindings.EmployeeVO1.estimatedRowCount eq 0}"/>
                <af:spacer width="10" height="10" id="s21"/>
                <af:commandToolbarButton text="Collapse All" id="cbb3"
                                         actionListener="#{empBean.collapseEmpTreeTable}"
                                         disabled="#{bindings.EmployeeVO1.estimatedRowCount eq 0}"/>
              </af:toolbar>
            </f:facet>
            <af:treeTable value="#{bindings.EmployeeVO1.treeModel}" var="node"
                          selectionListener="#{bindings.EmployeeVO1.treeModel.makeCurrent}"
                          rowSelection="single" id="tt1"
                          styleClass="AFStretchWidth"
                          binding="#{empBean.empTree}" columnStretching="last"
                          disableColumnReordering="true" expandAllEnabled="true"
                          rowBandingInterval="1" summary="Display Employee Info"
                          autoHeightRows="24" partialTriggers="::cbb2 ::cbb3"
                          initiallyExpanded="true"
                          horizontalGridVisible="false">
              <f:facet name="nodeStamp">
                <af:column id="c1" width="250" headerText="Employee Name"
                           rowHeader="true" inlineStyle="text-align:start;">
                  <af:outputText id="ot1" value="#{node.EmpName}"
                                 rendered="#{node.EmpName != null ? true : false}"/>
                </af:column>
              </f:facet>
              <af:column id="c3" width="180" headerText="Email"
                         inlineStyle="#{node.NewCount gt '0' ? 'color:#00ff00;': 'color:#003D5B;'}">
                <af:outputText id="ot3" value="#{node.Email}"
                               rendered="#{node.Email != null ? true : false}"/>
              </af:column>
              <af:column id="c7" width="180" headerText="Selected"
                         inlineStyle="text-align:center;">
                <af:group id="g1">
                  <af:selectBooleanCheckbox id="sb2" autoSubmit="true"
                                            value="#{node.empCheck}"
                                            rendered="#{node.empCheck != null ? true : false}"
                                            label=" "/>
                </af:group>
              </af:column>
              <af:clientListener method="expandNode" type="selection"/>
            </af:treeTable>
          </af:panelCollection>

Create binding to tree table in bean class and add following methods to perform selected operation.

    private RichTreeTable empTree;

    public void setEmpTree(RichTreeTable empTree) {
        this.empTree = empTree;
    }

    public RichTreeTable getEmpTree() {
        return empTree;
    }

    private void expandTreeChildrenNode(RichTreeTable rt,
                                        JUCtrlHierNodeBinding node,
                                        List<Key> parentRowKey) {
        ArrayList children = node.getChildren();
        List<Key> rowKey;
        if (children != null) {
            for (int i = 0; i < children.size(); i++) {
                rowKey = new ArrayList<Key>();
                rowKey.addAll(parentRowKey);
                rowKey.add(((JUCtrlHierNodeBinding)children.get(i)).getRowKey());
                disclosedTreeRowKeySet.add(rowKey);
                if (((JUCtrlHierNodeBinding)(children.get(i))).getChildren() ==
                    null)
                    continue;
                expandTreeChildrenNode(rt,
                                       (JUCtrlHierNodeBinding)(node.getChildren().get(i)),
                                       rowKey);
            }
        }
    }

    public void collapseEmpTreeTable(ActionEvent actionEvent) {
        empTree.getDisclosedRowKeys().clear();
    }

    public void expandEmpTreeTable(ActionEvent actionEvent) {
        // Add event code here...
        if (this.empTree != null) {
            disclosedTreeRowKeySet = new RowKeySetImpl();

            CollectionModel model = (CollectionModel)empTree.getValue();

            JUCtrlHierBinding treeBinding =
                (JUCtrlHierBinding)model.getWrappedData();
            JUCtrlHierNodeBinding rootNode = treeBinding.getRootNodeBinding();
            disclosedTreeRowKeySet = empTree.getDisclosedRowKeys();
            if (disclosedTreeRowKeySet == null) {
                disclosedTreeRowKeySet = new RowKeySetImpl();
            }
            List<JUCtrlHierNodeBinding> firstLevelChildren =
                rootNode.getChildren();
            for (JUCtrlHierNodeBinding node : firstLevelChildren) {
                ArrayList list = new ArrayList();
                list.add(node.getRowKey());
                disclosedTreeRowKeySet.add(list);
                expandTreeChildrenNode(empTree, node, list);
            }
            empTree.setDisclosedRowKeys(disclosedTreeRowKeySet);
        }
    }

Expand/Collapse tree with single click:
Following Java script will help you to expand/collapse tree with single click

      <af:resource type="javascript">
        function expandNode(evt) {
            var tree = evt.getSource();
            var rwKeySet = evt.getAddedSet();
            var firstRowKey;
            for (rowKey in rwKeySet) {
                firstRowKey = rowKey;
                break;
            }
            if (tree.isPathExpanded(firstRowKey)) {
                tree.setDisclosedRowKey(firstRowKey, false);
            }
            else {
                tree.setDisclosedRowKey(firstRowKey, true);
            }
        }
      </af:resource>

Add clientlistener to treetable to trigger java script and set type as selection

       <af:clientListener method="expandNode" type="selection"/>

No comments:

Post a Comment

Provide your thoughts !