<div id="treeBox" style="width:200;height:200"></div> <script> treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0); tree.setImagePath("gfx/"); tree.enableCheckBoxes(false); </script> Parameters passed to the constructor are:

object to attach treegrid to (should be loaded before calling constructor)

width of the treegrid

height of the treegrid

identifier of level parent to treegrid root level

Specify Additional parameters of the treegrid:

setImagePath(url) - method specifies the path to the folder with treegrid icons

enableCheckBoxes(mode) - enable/disable checkboxes in treegrid (checkboxes appear by default)

<div id="treeBox" style="width:200;height:200"></div> <script> treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0); ... treegrid.tree.setOnDragHandler(onDrop);//set function object to call on drop treegrid.tree.setOnClickHandler(onNodeSelect);//set function object to call on node select treegrid.tree.setOnOpenHandler(onOpen,state);//set function to call on open/close node treegrid.tree.setOnDblClickHandler(onDblClick);//set function to call on dbl click </script>

Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)

Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)

node ID and node state will be passed to the function specified as argument for setOpenAction(funcObj,state)

node ID will be passed to the function specified as argument for setDblClickAction(funcObj)

<script> tree=new dhtmlXTreeObject('treeBox',"100%","100%",0); ... tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED")); tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED")); </script>

0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them

Last argument is a comma delimited string of following possible value (upper case only):

SELECT - move selection to this node after inserting

CALL - call function on select

TOP - add node to the top position

CHILD - node has children

CHECKED - checkbox is checked (if exists)

<script> tree=new dhtmlXTreeObject('treeBox',"100%","100%",0); tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml"); tree.loadXML();//load root level from xml </script>

ID of opened node (as id url parameter) will be added to URL specified in initXMLAutoLoading(url) during the call

No additional ID is added to the url specified in loadXML(url) method during the call

Using loadXML() without parameters you load url specified in initXMLAutoLoading(url) method

XML Syntax: <?xml version='1.0' encoding='iso-8859-1'?> <tree id="0"> <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes"> <userdata name="system">true</userdata> <item text="Floppy (A:)" id="11" child="0" im0="flop.gif" im1="flop.gif" im2="flop.gif"/> <item text="Local Disk (C:)" id="12" child="0" im0="drv.gif" im1="drv.gif" im2="drv.gif"/> </item> <item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/> </tree> <tree> node is mandatory. It specifies the parent of loading block of data. According to this its id parameter specifies the ID oth that parent. To load root level you need to specify the ID you used when created tree object: new myObjTree(boxObject,width,height,0)
<item> can contain subitems (in order to load more than one level at once) or not.
Mandatory parameters for this tag are:

text - label of the node

id - id of the node

Optional parameters for this tag are:

im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)

im1 - image for opened node with children

im2 - image for closed node with children

select - select node on load (0/1)

call - call function on select(0/1)

checked - check checkbox if exists(0/1)

child - spec. if node has children (1) or not (0)

To set userdata directly within XML use <userdata>
It has just one parameter:

name

and value to specify userdata value

There are two ways to set custom icons for the node. And it depends on the way you add items.
Important: tree will get images for the nodes from the path specified in setImagePath(url) method.

Javascript way. Using arguments of insertNewChild(...) or insertNewNext(...) methods: <script> var im0 = "doc.gif";//icon to show if node contains no children var im1 = "opened.gif";//if node contains children and opened var im2 = "closed.gif";//if node contains children and closed tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2); tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif"); </script> XML way. Using parameters of <item> tag: <?xml version='1.0' encoding='iso-8859-1'?> <tree id="0"> <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif"> </tree>

im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)

im1 - image for opened node with children

im2 - image for closed node with children

If your tree should contain large amount of nodes (or you simply do not want to waist time loading hidden nodes), it would be better to load them on demand, not at once. For this purpose we made the tree to load levels dynamically using XML.
See chapter "Loading data with XML"

A few examples of manipulating node with tree object methods: <script> tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0); ... var sID = tree.getSelectedItemId();//get id of selected node tree.setLabel(sID,"New Label");//change label of selecte node tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state) tree.openItem(sID);//expand selected node tree.closeItem(sID);//close selected node tree.changeItemId(sID,100);//change id of selected node to 100 alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children </script>