Highlight current Tree Node

Posted on by

During the DOAG SIG workshop I was asked how to create a treeview in Oracle APEX where the current selected tree node is highlighted.

After a quick thought about the problem, it turned out that there is a quite simple solution for it if you combine the treeview query with some HTML code.

  1. Create a regular tree region
  2. Create a form region which gets synchronized with your tree
  3. Change the tree query to contain the following CASE statement 
    SELECT EMPLOYEE_ID AS ID
     , MANAGER_ID  AS PID
     , CASE
         WHEN EMPLOYEE_ID = :P 4_EMPLOYEE_ID THEN
             '<span style="color:white;background-color:blue;">'||
             LAST_NAME||
             '</span>'
         ELSE
             LAST_NAME
       END AS NAME
     , 'f?p=&APP_ID.:4:'||:SESSION||'::NO::P4_EMPLOYEE_ID:'||EMPLOYEE_ID AS LINK
     , NULL        AS A1
     , NULL        AS A2
  FROM #OWNER#.EMPLOYEES

What does it do?

When the tree is rendered the CASE compares the currently processed node (EMPLOYEE_ID) with the current active record (P4_EMPLOYEE_ID) which is displayed in the form.
If the IDs match, it wraps the LAST_NAME column with a SPAN which contains some styling information.

Quite simple, isn’t it? :-)

View a working demo of the example.

11 thoughts on “Highlight current Tree Node”

  1. Hallo,

    danke für die Hilfe.
    Das Ding funktioniert super.

    Viele Grüsse

    Volker Strasser

  3. Hi Patrick
    I’m a big fan of your articles. Very helpful. I’m having strange problem with trees in a sidebar display point. Does anyone have experience where a tree is always blank in a sidebar (or any particular) region? Apex 3.0.1.00.08 – Sand theme.

    Thanks
    BoeroBoy

  6. Quick question.. Can yo udo a tooltip on a dhtml tree?? I mean the items in the tree, to show a small description of the menu item?

    I could not find a spot to post the javascript call..

    Thanks!

    Tony Miller
    tomiller@utmb.edu

  7. Hi Tony,

    just add a SPAN around your tree label where you can attach the onmouseover event. For example like the following query:

    SELECT EMPLOYEE_ID AS ID
     , MANAGER_ID  AS PID
     , '<span onmouseover="toolTip_enable(event,this,''Primary key: '||EMPLOYEE_ID||''');">'||
       LAST_NAME||
       '</span>'   AS NAME
     , NULL        AS LINK
     , NULL        AS A1
     , NULL        AS A2
  FROM EMPLOYEES

    Patrick

  8. Hi,

    I am new to APEX,I am trying to implement Menu as TREE into my Application,so as per your above instruction i successfully complete the my page.but now i want that tree menu is seen on all page of my appliaction on left side.but when i creating second page and give the source of other page item,it show tree only in one page.becuase on shared component tree item source is change.

    is there any way to assign the runtime tree into variable.

    Thanks

  11. Hi,

    I was wondering if it was possible to use tables from a granted schema as source for a tree. My problem is that each time I try to create the tree query, it only keep the schema name as if it was a view. I don’t understand why I can’t use other_schema.tree_table. APEX always show me other_schema…

    thank you

Comments are closed.