5 Replies Latest reply on Feb 18, 2015 4:45 AM by michpetrov

    How to focus on a node outside of screen?

    joploya

      Hello,

       

      I am facing an issue I really don't know to solve. I have a tree fully expanded which max-height is a bit less than screen size. So to access nodes that are down in the tree I need to scroll down.

      Problem is that when i put the selected node to this kind of node it doesn't scroll automatically to show where is the focus so people think the node is not selected. I saw that when I select a node that is more up, it is well highlighted. (node is programatically selected)

       

      Is there someone who knows how to force scrolling on selected node?

       

      Thank you very much.

       

      Regards,

       

      Sandra

        • 1. Re: How to focus on a node outside of screen?
          michpetrov

          Hi,

           

          there isn't a way to make the tree scroll automatically, you need to implement it yourself:

          What you need to do is find the scrollable element wrapping the tree and change its scrollTop value based on the selected node.

          $w = $(window);
          $w.scrollTop($w.scrollTop() + $(treeId).find(".rf-trn-sel")[0].getBoundingClientRect().top);
          

           

          If you're using <a4j:ajax> or similar to trigger the selection you can use @oncomplete to execute the JavaScript.

          • 2. Re: How to focus on a node outside of screen?
            joploya

            Hello,

            Thank you for your answer.

            I don't know enough how to use javascript and jsf together to implement your solution.

            I am using rich:tree and I don't manage the scrollBar myself, it comes from the displaying style of the container panel.

            <rich:panel id="orgUnitsTreePanel" style="height:768px;overflow:auto;">

                 <rich:tree ...

            </rich:panel>

            • 3. Re: Re: How to focus on a node outside of screen?
              michpetrov

              You put JavaScript on the page via <h:outputScript>, in your case the scrollable element is the panel itself so the function will look like this:

               

              <h:outputScript>
              scrollTree = function() {
                  var $panel = $("#form\\:orgUnitsTreePanel"); // escape the ":" in the the id with "\\"  
                  $panel.scrollTop($panel.scrollTop() + $("#form\\:tree").find(".rf-trn-sel")[0].getBoundingClientRect().top) - $panel.offset().top;
              } 
              </h:outputScript>
              

               

              Then you just need to call "scrollTree()" when the selection changes, e.g.

              <a4j:ajax event="selectionchange" oncomplete="scrollTree()" … />
              
              • 4. Re: Re: Re: How to focus on a node outside of screen?
                joploya

                I have added this to my code because we use jsf 1 :

                 

                <script type="text/javascript">

                        // <![CDATA[
                        scrollTree = function (){

                        var $panel = $("#form\\:orgUnitsTreePanel"); // escape the ":" in the id with \\
                        $panel.scrollTop($panel.scrollTop() + $("#form\\:orgUnitsTree").find(".rf-trn-sel")[0].getBoundingClientRect().top) - $panel.offset().top;

                       }

                        //]]>
                </script>


                //some code


                <rich:panel id="orgUnitsTreePanel" style="height:768px;overflow:auto;">

                 

                   <rich:tree nodeSelectListener="#{bean.processSelection}"
                        switchType="ajax" ajaxSingle="true" ajaxSubmitSelection="true"
                        var="orgUnit" id="orgUnitsTree" reRender="orgUnitViewPanel"
                        value="#{bean.orgUnitsTreeNode}" limitToList="true"
                        adviseNodeOpened="#{bean.nodeOpened}"
                        componentState="#{bean.orgUnitsTreeState}"
                        onselected="#{rich:component('waitingPanel')}.show()"
                        onbeforedomupdate="#{rich:component('waitingPanel')}.hide();scrollTree();">


                But it doesn't work.

                I have also tried as you advised me with <a4j:support tag but my IDE displayed a warning that the function doesn't exist (the function is define in the same file) and no result if i test it.



                • 5. Re: How to focus on a node outside of screen?
                  michpetrov

                  Ah, I made a typo in the function, it should be: "$panel.scrollTop($panel.scrollTop() + $("#form\\:orgUnitsTree").find(".rf-trn-sel")[0].getBoundingClientRect().top - $panel.offset().top);"

                   

                  In any case try using oncomplete instead; onbeforedomupdate executes before the tree is rerendered, so any change to the HTML code might not be visible because the HTML will be replaced.