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.
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
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…
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)
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 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?!
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)
}
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
in frm_content.php it reloads my iframe in a endless loop. why would it do that?
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 )
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
in frm_content.php it reloads my iframe in a endless loop. why would it do that?
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);
})
So i have a similar problem with the scrolling function.
I have a tree structure saved in a xml - file. This xml- file is filled up on server-side in a class named “repository.aspx.cs”. In this class I build this xml manually and give it by a parameter to the client-side. Example: courseTree.source = %myXML% —> this is working and not my question.
So what do I next. I have at the moment the first two levels loaded. That means, I load the top-parent and the subfolders and items in this top-parent.
This I have to do in this way, because I have a big structure in the tree and the performance is too bad if I would load the whole data from the beginning.
I solve this problem by inserting the new branches on each click on a folder.
The same thing I do also when I looking for a searchWord by a searchText, i go to the DB by C# code and get the new folders and items by AJAX.
NOW MY Problem!! : I use the
insertNewChild(“parentID”,“ownchildID”,"" for title of node");
I call this function by the eval(); function.
–> eval(insertNewChild(“parentID”,“ownchildID”,"" for title of node");
What happens next. I try to open all Subfolders with openitem(parentId) and then select the last item in this structure and try to focusItem.
What happens actually is, that the tree opens all new generated items and select the item i want it is selected. BUT the focusitem doesn’t work!!!
Then I click “next” for looking for the next word with the same searchWord in the tree, and it is selected and FOCUSED!! So first click it doesn’t work and the seceond click(next-click) select the next item as well the selecting is working on the first click AND here works the focus also.
Then I have written an own selecttoitem - function ON THE LIBRARY file!! v2.5pro
//insertNewFile
var content = get…() -> get the content from the server-side.
//eval(content); The content you can see below
eval(
courseTree.insertNewChild(
“3174”,
“AU_4026”,
"<span class=‘repositoryStyle1’ onmousemove=“ShowContent(‘40263174’); return true;” onmouseover=“this.style.backgroundImage=‘url(localhost:61620/web/profile/cybe … report.gif);’ onclick=‘javascript:call_student_report(4026);’>
| rights_Copy (1) |
);
courseTree.openItem(blockIds[blockIds.length - 1]); // this works!!!
// calls for each folder and subfolder!
//blockIds -> f.e.: 553,3174,AU_1003 first two numbres are the folders. 553 is the top folder, 3174 is the subfolder and AU_4026 is the new inserted Item which have not been before in the tree.
now I want to select and focus the new insered Item with the itemId => “AU_4026”.
courseTree.selectItem(blockIds[blockIds.length - 1]) // this works!! courseTree.focusItem(blockIds[blockIds.length - 1]); // this doesn’t work!!!
window.scrolltoItem(blockIds[blockIds.length - 1]); //my try to scroll. but doesn’t work for the first searchWord call. Second click(find next) works.
function scrolltoItem(focusThisItem) {
var rollcount = courseTree.findItemPX(focusThisItem);
window.scrollTo(0, rollcount);
}
dhtmlXTreeObject.prototype.findItemPX = function (itemId) {
var sNode = this._globalIdStorageFind(itemId);
if (!sNode) return (0);
return this._findItemPX(sNode) - 150
};
dhtmlXTreeObject.prototype._findItemPX = function (item) {
return getAbsoluteTop(item.htmlNode);
};
function getAbsoluteTop(htmlObject) {
return getOffset(htmlObject).top
};
function getOffset(elem) {
if (elem.getBoundingClientRect && !_isChrome) {
return getOffsetRect(elem)
} else {
return getOffsetSum(elem)
}
};
function getOffsetSum(elem) {
var top = 0,
left = 0;
while (elem) {
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent
};
return {
top: top,
left: left
}
};
// here is the problem, that the box.top is empty!!! But only when I search for the first time. When I click “Next” I do the same things from the Searchfunction but only with a new ARRAY item remeber “blockIds”. And then it works!! ?? What is the difference between first and second CLICK?
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return {
top: Math.round(top),
left: Math.round(left)
}
};
Thanks for your help.
findItemPX(focusThisItem) is on the libraryFile! I now about the problems with updates.
Hello, beljo
To reproduce the issue we need completed demo withot serverside script.
Please, provide it.
docs.dhtmlx.com/doku.php?id=othe … leted_demo
If you have PRO version - send it to support@dhtmlx.com with a link to this topic.
So, tree hasn’t a scroll. You can get a tree node object and scroll the whole page to it by javascript.
NOTE: Getting a tree node object isn’t public
var nodeObject = tree._globalIdStorageFind(id).htmlNode;