-
1. Re: How to focus on a node outside of screen?
michpetrov Feb 2, 2015 5:28 AM (in response to joploya)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 Feb 16, 2015 10:24 AM (in response to 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 Feb 17, 2015 5:34 AM (in response to joploya)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 Feb 17, 2015 8:38 AM (in response to michpetrov)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 Feb 18, 2015 4:45 AM (in response to joploya)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.