Apex JSTree Nodes Remain Expanded After Page Refresh

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.:

[sourcecode language=”sql”]

select case when connect_by_isleaf = 1 then 0
when level = 1 then 1
else -1
end as status,
level,
"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"

[/sourcecode]

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

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

Thanks to Doug Gault for help on this.