Skip to Main Content
Forums

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

APEX Tree expand child node conditionally

Prashanth Raju-OracleJul 23 2019 — edited Jul 30 2019

Hello APEXPERTS,

I am using APEX 19.1. I have an Tree region in my page. By default all the Tree nodes are expanded. I have used the Item ID under "Selected Node Page Item" attribute to highlight the tree node.

My requirement is to expand Tree nodes from the Root Node till the Selected Node and its child nodes (if any). Rest of the Nodes below the Selected Tree Node must be in collapsed state. Below picture gives a better idea of my requirement.

Tree.PNG

Any hint would be helpful.

Thanks in advance.
This post has been answered by John Snyders-Oracle on Jul 23 2019
Jump to Answer

Comments

John Snyders-Oracle
Answer

Hi,

This is an unusual use case; expand all the nodes up to a given node. You say that by default all nodes are expanded but I don't know of any option to do that. You must be doing something on page load to expand all the nodes. Perhaps you use the DA action Expand Tree.

I assume you already have a way to set the Selected Node Page Item.

Add the following to the tree region JavaScript Initialization Code attribute:

function(options) {

    // traverse the tree data gathering nodes to expand up to a given id

    function traverse( expandNodes, n, stopId ) {

        var i, stop;

        if ( n.id === stopId ) {

            return true;

        }

        if ( n.children ) {

            // if it has children then it is something that can be expanded

            expandNodes.push( n.id );

            for ( i = 0; i < n.children.length; i++ ) {

                stop = traverse( expandNodes, n.children[i], stopId );

                if ( stop ) {

                    return stop;

                }

            }

        }

        return false;

    }

    options.makeNodeAdapter = function(data, types, hasIdentity) {

        var a, expandedIds = [];

        traverse(expandedIds, data, $v("P10_SELECTED_NODE")); // change this to match your page item that holds the selected node id

        a = $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity, expandedIds );

        return a;

    }

    return options;

}

Regards,
-John

Marked as Answer by Prashanth Raju-Oracle · Jul 23 2019
Prashanth Raju-Oracle

Thanks @"John Snyders-Oracle"  for the code. Yes, I was using an Dynamic Action to expand the tree nodes on page load. I have disabled it after adding your code.

It works perfectly fine. It expands all the nodes up to a given node. But the code does not expand the given node by itself. I mean if there are any child nodes for P10_SELECTED_NODE then it will still be in collapsed state. How can I modify the code to expand the selected node (ex: P10_SELECTED_NODE) as well?

Thanks in advance.

John Snyders-Oracle

I think just move the exit test to after the recursion.

so:

    // traverse the tree data gathering nodes to expand up to a given id

    function traverse( expandNodes, n, stopId ) {

        var i, stop;

        if ( n.children ) {

            // if it has children then it is something that can be expanded

            expandNodes.push( n.id );

            for ( i = 0; i < n.children.length; i++ ) {

                stop = traverse( expandNodes, n.children[i], stopId );

                if ( stop ) {

                    return stop;

                }

            }

        }

        return n.id === stopId;

    }

1 person found this helpful
Prashanth Raju-Oracle

@"John Snyders-Oracle",

Thanks a ton for your quick response. It worked.

Prashanth Raju-Oracle

@"John Snyders-Oracle",

Sorry to trouble you again. I have a slight change in my requirement which was mentioned in my initial post.

I have to expand only the Selected Nodes parent and its child's (if any). Rest of the tree nodes must be collapsed.

I tried modifying the code which you sent earlier to satisfy my new requirement but I am unable to get to my requirement.

Can you let me know the code snippet to to satisfy this requirement?

Below is my Tree with All node expanded. this show root node with its children:

tree_expanded.png

Below is my Tree with only Selected Node and its child expanded. Rest of the nodes are collapsed:

Tree_New.png

Thanks in advance.

Prashanth Raju-Oracle

@"John Snyders-Oracle"

Below are the updated Screenshots. Screenshots above is not showing the correct Selected Node:

Tree with All nodes expanded and selected nodes highlighted:

tree_expanded.png

Tree only selected node and its children expanded:

Tree_New.png

GPGRIMES2

What I'm trying to do what is probably very simple. I want to add code to expand nodes below current node if the current node is double clicked. I want stop expanding when the node is at the same level as the node which was double clicked. For example:
Entity: abc
Sub-Entity: def
Program Group: ghi
Program: jkl
Program: jkl2
Program Group: mno
Program: pqr
Program: pqr2
Sub-Entity: tuv
...
Entity: wxy
...
If I double click on, Entity: abc, then all nodes under this node, are expanded but stop at Entity: wxy. If I double click on Program Group: ghi, then Program nodes: jkl and jkl2 are expanded. Note: There could be more levels below Program level. Also, some levels make not exist, i.e. you could have a Sub-Entity but no children levels below that.
Any assistance would be greatly appreciated.
Thanks.

1 - 7

Post Details

Added on Jul 23 2019
#apex-discussions
7 comments
2,313 views