Parent tree nodes can be easily added to the tree from script with the help of the insertNewNext() method. The following incoming parameters should be indicated in this method:
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
The insertNewChild() method allows adding a new child item for the chosen tree node. The parameters the user should indicate are:
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
The item added as a child is always created as the last one of child items for the specified parent.
Any item can be easily removed from the tree in the following way:
tree.deleteItem(itemId, selectParent);
The parameters the user should specify are:
The following method allows the user to remove all child items of a certain node easily:
tree.deleteChildItems(itemId);
Related sample: Add / Delete items
There is a possibility in dhtmlxTree to set whether a parent item will be expanded or not when a child item is added to it.
tree.openOnItemAdded(mode);
The method can be set either to true (the parent item will be expanded on child adding) or to false (the parent item won't be expanded).
There is a possibility to expand/collapse any node in dhtmlxTree from script. The only value that the user should indicate is the id of the item in question:
tree.openItem(itemId); // expand the indicated item
tree.closeItem(itemId); // collapse the indicated item
The user can also expand/collapse all items in the tree. The mandatory parameter here is the id of the item starting from which all items will be expanded/collapsed:
tree.openAllItems(itemId); // expand all items
tree.closeAllItems(itemId); // collapse all items
One more method to expand all tree items that is similar to the above mentioned one but works in dynamic trees:
tree.openAllItemsDynamic(itemId); // expands all items in a dynamic tree
The method to expand a list of tree items in a dynamic tree (items are expanded one by one, the next item will be opened only when the previous one is loaded):
tree.openItemsDynamic(list,flag);
The parameters are:
There is a method that can prevent the item from collapsing:
tree.setItemCloseable(itemId,flag);
The parameters here are as follows:
Item's state (expanded/collapsed) can be got in the following way:
var state = tree.getOpenState(itemId);
The method returns true if the item in question is expanded, and false if the item is collapsed.
Related sample: Collapse/Expand nodes
By locking the tree the user denies expanding/collapsing tree nodes. A tree isn't locked (false) by default. To lock the tree, the lockTree() method should be set to true:
tree.lockTree(true); // false to unlock the tree
Any item, whether it is a parent or a child one, can also be locked by the lockItem() method:
tree.lockItem(itemId); // id of the item as the input parameter
To get the state (locked/unlocked) of any item in the tree, the user should apply the following method:
var itemState = tree.isLocked(itemId); // returns current item's state
If the item in question is locked, the method returns true, if it is unlocked, false is returned.
Any item in the tree can be made editable: double click on the item allows editing its title text. All items in the tree are not editable (false) by default. To make them editable the user should write the following code line:
tree.enableItemEditor(true); // false to deny items editing
The user can activate the editor for a specified item from script with the help of the editItem() method. The only parameter that should be specified is the id of the item:
tree.editItem(itemId);
Item's editor can be easily deactivated from script bringing the item back to its normal view:
tree.stopEdit();
The event that starts an item's editing can be defined from script in the following way:
tree.setEditStartAction(click, dblclick);
The parameters define the following:
Related sample: Editable items
The user has the possibility to store the states of items to cookies in the following way:
tree.saveOpenStates(cookie_name,cookie_param);
The parameters of this method are:
There is a method that restores items' states (expanded/collapsed) from cookie's information:
tree.loadOpenStates(cookie_name); // the parameter is optional
Item's selection can also be stored in cookies in the following way:
tree.saveSelectedItem(cookie_name,cookie_param);
The parameters of this method are:
Item's selection can be restored from cookie in the following way:
tree.restoreSelectedItem(cookie_name); // the parameter is optional
The saveState() method stores the whole tree to cookies:
tree.saveState(cookie_name,cookie_param);
The parameters of this method are:
The loadState() method restores the whole tree from cookies:
tree.loadState(cookie_name); // the parameter is optional
dhtmlxTree allows its users to save the selected node automatically in cookies. The enableAutoSavingSelected() method is used to switch this functionality on/off in the tree:
tree.enableAutoSavingSelected(mode,cookieName);
The parameters are:
Related sample: Storing state in Cookies
The user can set the label (text) of a tree node in the following way:
tree.setItemText(itemId, newLabel, newTooltip);
The parameters are as follows:
The user has the possibility to get text of an item's label by indicating the item's id in the following way:
var text = tree.getItemText(itemId);
The user can also get the text of the currently selected item in the following way:
var textSelected = tree.getSelectedItemText();
The following line of code is responsible for specifying a node's color (text color) in the tree:
tree.setItemColor(itemId, defaultColor, selectedColor);
The parameters the user should specify are as follows:
Item's color can be easily received by an item's id in the following way:
car color = tree.getItemColor(itemId);
The object returned by the above mentioned method has the parameters { acolor:"value", scolor:"value" } where:
The format of the color will be the same as it was set by the setItemColor() method.
Related sample: Dynamical icon/text/style changing
There are three ways to set tooltip for an item in Tree:
using a node's text ("label" attribute of a node) as a tooltip. In this case the following method should be used:
tree.enableAutoTooltips(true/false); // false by default
using the "tooltip" attribute of a node in XML (it is used by default if this attribute was specified);
Item's tooltip is also easy to get with the help of the getItemTooltip() method by indicating an item's id:
var tooltip = tree.getItemTooltip(itemId);
The following method is used to refresh data for the specified node:
// if an item's id isn't indicated, the id of the top tree item will be used
tree.refreshItem(itemId);
The above mentioned code line presupposes that all the child items of the indicated node are removed, an XML file (indicated in the setXMLAutoLoading() method; auto loading should be activated) is loaded from the server. The data from this file is used for creating new child items of the node in question.
The following method is used to refresh data for several nodes:
tree.refreshItems(itemIdList, source);
The parameters of this method include the list of items that should be refreshed and the path to the XML file from which new data will be loaded. In this case the data is refreshed only for the nodes indicated in the itemIdList parameter (not their children).
Related sample: Refreshing Items
There is one more possibility to refresh data in the tree. The smartRefreshBranch() method is able to load XML from the server and refresh data for the specified branch (text, icons, items). It should be noted that the current position and all the changes introduced by the user stay the same in this case.
tree.smartRefreshBranch(itemId,source);
The parameters here are responsible for:
The smartRefreshItem() method is responsible for loading XML the data of which is used for refreshing the specified item in the tree. The same as the previous method, this one keeps the current position of the item and all other changes introduced by the user.
tree.smartRefreshItem(itemId,source);
The parameters are as follows:
There is a simple way of updating items in dhmlxTree - the updateItem() method. The used should indicate the id of the item that should be updated and the parameters that should be updated:
tree.updateItem(itemId,name,im0,im1,im2,achecked);
The parameters of this method are as follows:
The following methods allow the user to get ids of all parent tree nodes:
var parents = tree.getAllItemsWithKids(); // returns an array of nodes' ids
The user can get the list of ids of all tree's items that don't have child nodes (childless items):
var childless = tree.getAllChildless(); // returns an array of nodes' ids
The user can easily get the ids of all sub-items starting from the item the id of which is indicated in this method:
var subItems = tree.getAllSubItems(itemId);
Getting the list of all sub-items' ids for the specified item is quite easy. This parent item's id should be specified:
tree.getSubItems(itemId);
The user can change any node's id, if there's such a need, in the following way:
tree.changeItemId(itemCurrentId,itemNewId);
The user can get any child item's id by its index (sequence number) and the id of its parent:
var childId = tree.getItemIdByIndex(itemId,index);
The parameters are:
Child item's index (sequence number) can be easily got by its id:
var childIndex = tree.getIndexById(itemId);
The parameter is the id of the child item the index of which the user wants to get.
The getParentId() method can be used to get an item's parent id:
var parent = tree.getParentId(itemId);
The id of the item should be indicated as the parameter.
The ids of all checked/unchecked items in the tree can be easily got by the getAllChecked() method:
var list = tree.getAllChecked(); //returns an array of all checked items' ids
//or
var list = tree.getAllUnchecked(); // returns an array of all unchecked items' ids
The method, similar to the above mentioned ones, exists for getting the ids of all the partially checked items in the tree:
var list = tree.getAllPartiallyChecked(); // returns an array of all checked items' ids
Ids of all checked branches in the tree can be got like this:
var list = tree.getAllCheckedBranches(); // returns an array of all checked branches' ids
Selected item's id is easy to get through the getSelectedItemId() method which takes an item's id as a parameter:
var selectId = tree.getSelectedItemId();
There is a simple way of setting list separator in Tree:
tree.setListDelimeter(separator); // by default the separator is ","
There is only one parameter here - separator. It's a char or a string used for separating items in a list.
Any item in the tree can be moved with the help of the moveItem() method.
tree.moveItem(itemId, mode, targetId, targetTree);
The following parameters should be specified for this method:
One more way of moving nodes is the use of the doCut() and doPaste() commands. But they work only with selected items:
tree.doCut(); // marks the selected item as cut
tree.doPaste(itemId); // id of a new parent node
The cut item will be made a child node of the item indicated in the doPaste() method.
To clear the mark made by the doCut() method, the user is advised to use the clearCut() one:
tree.clearCut();
There is a method in dhtmlxTree that allows the user to get an item's current level (position in the hierarchy) by indicating this item's id:
var level = getLevel(itemId);
There is a possibility to set the top offset for a tree item using the following method:
tree.setItemTopOffset(itemId,value);
The parameters are:
The user can set the calculation mode for the tree in the following way:
tree.setChildCalcMode(mode); // disabled by default
There are the following mode variants available:
All tree child nodes will be calculated in this mode.
Along with setting the calculation mode for child items the user can specify calculation HTML like this:
tree.setChildCalcHTML(htmlA,htmlB);
The parameters here are:
The number of child items of a certain parent can be got in the following way:
var childItems = tree.hasChildren(itemId);
User data can be set for any tree item:
tree.setUserData(itemId,name,value);
The parameters of this method are:
User data set for a tree node can be got in the following way:
var userData = tree.getUserData(itemId,name);
The parameters of this method are:
Any node of the tree can have the link-like functionality specified for it. The link for an item can be set by user in XML. The user should also specify the onClick event for the item with link-like functionality.
Back to top