Apex JSTree Nodes Remain Expanded After Page Refresh

February 13, 2013 at 3:30 pm | Posted in Oracle Application Express (Apex), Oracle Developement, PL/SQL | Leave a comment
Tags: , , ,

To prevent a navigation JSTree to collapse after the page has been submitted, you need to have a page or application item to hold the menu ID value, so that the JSTree can remember which node was clicked after the page was refreshed.

In the Tree Attributes page you can then set the Selected Node Page Item to that new item and then the tree will remember which node to expand when it re-loads.

In my example I’ve created an unrestricted application item AI_TREE_NODE. You can alternatively use a page zero item or a page item.

In the link column of the tree SQL statement, I set AI_TREE_NODE to the menu id.:

select case when connect_by_isleaf = 1 then 0
            when level = 1             then 1
            else                           -1
       end as status,
       "ENAME" as title,
       null as icon,
       "EMPNO" as value,
       ename as tooltip,
       'f?p=&APP_ID.:3:&APP_SESSION.::::AI_TREE_NODE:' || EMPNO as link
from "#OWNER#"."EMP"
start with "MGR" is null
connect by prior "EMPNO" = "MGR"
order siblings by "ENAME"

In the Display Attributes section of the Tree Attributes I set the Selected Node Page Item to the application item AI_TREE_NODE.

Screen Shot 2013-02-13 at 2.23.29 PM

Now, whenever you click a node, the tree will remember which node was clicked, and expand the tree accordingly.

Screen Shot 2013-02-13 at 2.28.31 PM

Thanks to Doug Gault for help on this.


Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Entries and comments feeds.

%d bloggers like this: