Thursday, 17 March 2011

Expand and Collapse all Tree Nodes

APEX comes with a nice region type which is a tree view. During the wizard creation, you have the option to add buttons to expand all and collapse all nodes - but after the fact, there is no option in the tree settings to add this functionality - so you either have to recreate the tree region specifying that option or have to know what you have to do in order to add in that functionality.

I came across this post on the OTN forums - - which give all the information about what you have to do to expand and collapse all nodes (I'm sure there are others, but that just happened to be the one I found).

This basic gist of it is this - there are two convenience functions to do the expanding and collapsing of all nodes - apex.widget.tree.expand_all(tree_id) and apex.widget.tree.collapse_all(tree_id), respectively - where tree_id is the unique identifier of the tree. You can either hard code it in (which is what is done when the buttons are created with the wizard, and in the examples on that post) or create a page item to reference the unique idenifier, and pass that in to the function call.

To find the unique identifier, you just have to view the page source. I find if you inspect the first node in the tree, the actual div with the tree id is 2 elements above. The other technique (which i have used as I find it avoids hard coding values) is to create a page item, and reference that item in the call to the javascript function(s).

So create a hidden page item (for example, P1_TREE_ID), followed by an item computation to run on page load with the source type of: SQL Query (return single value) and specify the source as:

select 'tree' || tree_id
from apex_application_page_trees
where page_id = :APP_PAGE_ID

Then, in my actual tree region, I specified region source as:

<a href="javascript:apex.widget.tree.expand_all('&P1_TREE_ID.')">Expand All</a> | <a href="javascript:apex.widget.tree.collapse_all('&P1_TREE_ID.')">Collapse All</a>

nb: This of course assumes your page only has one tree region on it, otherwise that computation will not work properly. Anyway, I can't think of a situation to use more than one tree on a page.

And there you have it. Expand and Collapse all links for your tree