9 Replies Latest reply: Mar 27, 2013 6:00 AM by Tom Petrus RSS

    Tree Issues

      Hi All,

      I'm using APEX 4.1 with Oracle 11g. I have created a page with the following:

      1. Tree region which includes the selected_node_page_item option so the user can click on a node and the node is remembered when user browses away from the page and returns.

      2. SQL Report built on a dynamic query so the user can enter a search which returns a results of potential records/nodes that the user may want to navigate to in my tree region (by clicking on a search result)

      Everything is working quite well except for a couple of issues that need to be addressed:

      1. The tree loads with no issues in Firefox and Chrome however, it is extremely slowly to load in IE8 and in some cases I get an IE prompt stating:

      "Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive."

      2. Although my search feature is working in that it highlights the tree node that the user selects in my search grid, it does not actually scroll the page/tree to where the highlighted node is. This means that the user has to scroll the page and keep a sharp eye to spot the highlighted node, not ideal for large trees ! Is there a way I can get the cursor to the highlighted node?

      Any help on both issues would be appreciated.

        • 1. Re: Tree Issues
          • 2. Re: Tree Issues
            • 3. Re: Tree Issues

              Can someone please share their thoughts on this ?

              • 4. Re: Tree Issues
                Tom Petrus
                I'll try and take a shot. Please clarify :
                1. The tree loads with no issues in Firefox and Chrome however, it is extremely slowly to load in IE8 and in some cases I get an IE prompt stating:

                "Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive."
                I take it the page loads correctly, but what is actually causing the "slow" is your script which runs on load (does it run on load?)
                How do you remember the "node"? An ID? A tree node label?
                How do you search for this specific node? Can you share the code?
                How many nodes are there usually in your tree?
                • 5. Re: Tree Issues
                  Thanks Tom.

                  1. My tree is a standard Apex Tree, created with the tree page wizard. My query runs fine in SQL Developer and in browsers other than IE8. Here is the query

                  select case when connect_by_isleaf = 1 then 0
                  when level = 1 then 1
                  else -1
                  end as status,
                  description as title,
                  null as icon,
                  child_id as value,
                  null as tooltip,
                  'f?p=&APP_ID.:11:'||:APP_SESSION||'::::P11_SELECTED_NODE:'||child_id as link
                  from test_hierarchy
                  start with parent_id = 'PX1A'
                  connect by prior child_id = parent_id
                  order siblings by description;

                  2. The tree remembers the node because I have set the 'Selected Node Page Item' tree attribute. This points to a page item P11_SELECTED_NODE.

                  3. My search for a node is a classic sql report region. This region lists a set of results which when clicked on initialises the P11_SELECTED_NODE and then submits the page hence the tree reloads and highlights the node as assigned to item P11_SELECTED_NODE.

                  4. My query returns 3000 rows

                  If I don't use IE8, I don't have a performance/tree loading issue. The search also works well, the only issue is if the user clicks on a search result that is quite nested down in the tree, then when the page loads I would like it to have the selected node area visible rather than having to scroll down the page to find the highlighted node.

                  • 6. Re: Tree Issues
                    Tom Petrus

                    While i can't really say why IE8 would be so much slower, I can't say it really surprises me. 3000 nodes is a lot too! It's probably just real slow in processing it all.
                    However, you could eliminate a lot of frustration by not having your page submit on every action. Having to reload the page just because you want to select a different node is complete overkill when your tree is so large, and especially when the browser is so slow.
                    What actually happens when you use the default method which submits? On load, the tree is initialized, and it runs some javascript code which will select the branch corresponding to the id in the selected node item:
                    By implementing some javascript you can skip the entire submit process, saving time and bandwidth. I've implemented this on my tree demo page : http://apex.oracle.com/pls/apex/f?p=54687:38
                    All the code I used is there aswell, so it shouldn't be to hard to figure out what you need. Leave a comment if you do need some help.

                    I've also added in code which will scroll to the selected node until it is in view at the top of the page. This is a solution from StackOverflow: http://stackoverflow.com/questions/6677035/jquery-scroll-to-element
                    $("#button").click(function() {
                         $('html, body').animate({
                             scrollTop: $("#elementtoScrollToID").offset().top
                         }, 2000);
                    • 7. Re: Tree Issues
                      Thanks Tom !

                      I will give it a go and feedback.
                      • 8. Re: Tree Issues
                        Hi Tom,

                        It worked a treat, thanks !

                        I have a question on the page scrolling that brings the selected node to the top of the page. I have made my tree region scrollable by putting the <div> tag in it's header section. The reason for this is that above my tree region, I have the sql report (similar to your 'Employees - select a node' region) which the user can click through and the tree node is highlighted. It's important that this report region stay in view else the user needs to keeping scrolling up the page after each row click.

                        Is there a simple way to modify the following code so that it applies to the tree region and not the entire page? Maybe I can pass in the static region id ?

                        $('html, body').animate({
                        scrollTop: l$Node.offset().top
                        }, 2000);

                        • 9. Re: Tree Issues
                          Tom Petrus
                          Billy, yes. If you want to scroll the active tree node into view within the context of the containing div then that is possible.
                          For example, when i execute this on my example page:
                          $("#emptree div.rc-body").css({"height":"150px","overflow":"scroll"})
                          It'll reduce the div tree region and show scrollbars. Expanding all.

                          Now if i want to scroll a node to the top of this view i can use this:
                          (li element with id 7566 is employee SMITH)
                          var lContainerOffset = $('#emptree div.rc-body').offset();
                          $('#emptree div.rc-body').animate({
                              scrollTop: $("li#7566").offset().top - lContainerOffset.top
                          }, 2000);
                          As you might see, $('#emptree div.rc-body') is the scrolling container. Its offset has to be retrieved too, because the offset of the li-element is in this case in relation with the top of the document. Without first subtracting the top offset of the container, it'd scroll to the wrong place.