APEX Tree. Keep focus on expanded leaf node.

Question

How do I prevent my tree from jumping back to the top when I expand a leav node that is below the screen scroll. I have a single parent of CORP with about 30 leaf nodes as its direct children. I have to scroll down to expand a node towards the bottom of the list. When I scroll down and expand, the page refreshes and jumps back to the top so now I have to scroll down again to expand the next node, etc. My current Tree Qurey is like
select CHILD_ID id,
PARENT_ID pid,
CASE WHEN CHILD_ID = :P23_TARGET THEN
CASE WHEN :P23_STATUS = 'Target Up' THEN
'<span styl="color:green;">' || ITEM_NAME || '</span>'
ELSE ITEM_NAME
END
ELSE
ITEM_NAME
END name,
'f?p=&APP_ID.:23:'||:SESSION||'::NO::P23_TARGET:'||CHILD_ID link,
null a1,
null a2
from CORP_SVR_HRCHY_VW

Answer 1

Hi,
You have to use the Anchor ID functionality of a browser - this allows you to add #id to the end of the url where id refers to the id attribute of the item that should receive the focus when the page is reloaded.
As an example: [http://apex.oracle.com/pls/otn/f?p=33642:200]
This, of course, requires a bit of setting up, but is easily doable.
For this example, my SQL statement for the tree is:
SELECT 1 ID, NULL PID, 'Top' NAME, NULL LINK, NULL A1, NULL A2 FROM DUAL
UNION ALL
select "EMPNO" id,
       1 pid,
       "ENAME" name,
       'f?p=' || :APP_ID || ':200:' || :APP_SESSION || '::::P200_EMPNO:' || EMPNO || '#node' || EMPNO link,
       'node' || EMPNO a1,
       null a2
from "#OWNER#"."EMP"You will note that the URL contains *'#node' || EMPNO* at the end of the link - for an EMPNO of 1234, this would add *#node1234* to the end of the URL. You will also note that I've added *'node' || EMPNO* to the A1 column - whatever I add into this column becomes available for use in the output by referencing it as #A1# in the template. On the tree's template definition, wherever there is an A tag, I've included:
ID="#A1#"as an attribute of the tag. For example, on the "Name Link Anchor Tag" setting, I have:
&lt;a href="#LINK#" ID="#A1#"&gt;#NAME#&lt;/a&gt;and, wherever #A1# appeared outside of an A tag, I have removed it (otherwise, the "node1234" text would appear at that point in the page).
Andy