Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Daniel on Jun 01, 2009 23:03
open dhtmlx forum
how do i set focus on dhtmlxTree from within an iframe?

Im having a problem selecting items in a tree. i know its a pro-version feature and we bought the license last week.
index.php is my main page, and it contains the tree component and an iframe 'frm_content.php' to display the pages selected from the tree. this works so far, but if the user navigates accross the page without using the treeview (for example if he comes from a different site, via bookmarks or type-in) i cant focus an item.
i know the tree-position inside frm_content.php for the given page, but how do i adjust the focus on the tree in the parent container?

i tried
parent.document.tree.focusItem(itemId);
parent.document.tree.selectItem(itemId);
in frm_content.php, but that had no effect at all - not even an error message.

it also didnt work when i added
tree.focusItem(itemId);
tree.selectItem(itemId);
on index.php just for testing.
i have a nested tree and my itemIds are strings like '0' or '0_1'. checked the example code in the documentation as well. just cant get it to open and select a node if the whole tree is collapsed.
Answer posted by Support on Jun 02, 2009 02:26
>> if the whole tree is collapsed.
Just start from openItem command

parent.tree.openItem(itemId);  //open related tree branch
parent.tree.focusItem(itemId); //adjust scroll of the tree
parent.tree.selectItem(itemId); //mark selected item

Please be sure that container , in which tree placed, has not its own scrollbar ( outer scrollbars, which is not generated by tree, will not be adjusted by focusItem command ) 

>> like '0' 
Please beware that virtual root has ID as 0 , by default
Answer posted by Daniel on Jun 07, 2009 16:32
thanks, but that didnt work either. its just looks to me like tree.openItem(itemId) has no effect at all in my nested tree. tried it in firefox, ie8 and chrome.
if my whole tree is collapsed and i call your code:
itemId = '0_2_1_7';
parent.tree.openItem(itemId);  //open related tree branch
parent.tree.focusItem(itemId); //adjust scroll of the tree
parent.tree.selectItem(itemId); //mark selected item

nothing happens.
if the whole tree is collapsed i can open '0_2', if i already have 0_2 open i can focus and select any child element of 0_2.
i load the tree via xml request, could it be an issue that dhtmlxTree does not 'know' the full tree structure because it would only load each branch on demand?

in your example dhtmlxTree_21_pro_90226/dhtmlxTree/samples/nodes_manipulation/tree_open_close.html you load the whole tree structure from tree3.xml, thats pretty much the only significant difference i noticed here...
Answer posted by Support on Jun 08, 2009 05:31
If you are using dyn. loading in tree - it not possible to open item which is not loaded yet ( there is no info about such item on client side )

>>that dhtmlxTree does not 'know' the full tree structure because it would only load each branch on demand? 
Correct

In case of dyn. loading , there is a separate command which may help

mygrid.openItemsDynamic("0_2,0_2_1,0_2_1_7",true);

Command accept not the target item ID, but the list of ids from the top to the item in question - now when command have all necessary info, it will open all branches ( will load them from server if necessary ) and select last item in chan (0_2_1_7)
Answer posted by Daniel on Jun 08, 2009 22:10
if i use the tree.openItemsDynamic() function im always getting a 'temp is null' error in firebug, pointing to codebase/ext/dhtmlxtree_xw.js line 23:

...
var temp=that._globalIdStorageFind(that.G_node);
if (temp.XMLload===0)
...

that.G_node contains my item_id 0_2_1 and then 0_2 if i chuck in an alert() here.

my Treeobject code:

tree=new dhtmlXTreeObject("navtree","100%","100%",0);

tree.enableKeyboardNavigation(true);
tree.enableKeySearch(true);
tree.setOnClickHandler(doOnClick);     
tree.setImagePath("js/codebase/imgs/csh_vista/");
tree.setXMLAutoLoading("frm_treeview.php?f=1");
tree.loadXML("frm_treeview.php?id=0");
tree.openItemsDynamic('0_2,0_2_1,0_2_1_1',true)

function doOnClick(nodeId)
{
    var myUrl = tree.getUserData(nodeId,"targeturl");
    document.getElementById('content').src = myUrl;
}

following files are included in <head> on this page:

js/codebase/dhtmlxcommon.js
js/codebase/dhtmlxtree.js
js/codebase/ext/dhtmlxtree_xw.js
js/codebase/ext/dhtmlxtree_li.js
js/codebase/ext/dhtmlxtree_kn.js


im using dhtmlxTree v.2.1 Professional edition build 90226.
did i miss anything?!



Answer posted by Alex (support) on Jun 09, 2009 00:41

Hello, 

try to open nodes after tree root is loaded completely:

...

tree.loadXML("frm_treeview.php?id=0",doAfterLoading);

function doAfterLoading(){
  tree.openItemsDynamic('0_2,0_2_1,0_2_1_1',true)
}

Answer posted on Jun 09, 2009 23:00
Thanks, this brings me back to my orginal issue:
my index.php holds the tree component and an iframe 'frm_content.php'. how can i preselect an item in the tree from within frm_content.php?
when i add  
<script type="text/javascript">
top.tree.openItemsDynamic('0_2,0_2_1,0_2_1_1', true);
</script>
in frm_content.php it reloads my iframe in a endless loop. why would it do that?
Answer posted by Support on Jun 10, 2009 03:59
When "true" used as last parameter - related item in tree selected, and onSelect event handler called for it. So if you have a custom code , attached to the onClick event of tree - it will be called.

- you code called 
- item in tree selected
- onClick event called
- code attached to onclick reloads iframe
- code in iframe called ( this initiates the same order of events )
Answer posted on Jun 10, 2009 15:22
Thanks, this brings me back to my orginal issue:
my index.php holds the tree component and an iframe 'frm_content.php'. how can i preselect an item in the tree from within frm_content.php?
when i add  
<script type="text/javascript">
top.tree.openItemsDynamic('0_2,0_2_1,0_2_1_1', true);
</script>
in frm_content.php it reloads my iframe in a endless loop. why would it do that?
Answer posted by Alex (support) on Jun 11, 2009 00:53

Hello, 

you can try to use something as follows:

top.tree.openItemsDynamic('0_2,0_2_1,0_2_1_1', false);

top.tree.attachEvent("onOpenDynamicEnd",function(){

  this.selectItem("0_2_1_1",false);

})