Moving items by API

Move from left tree to right tree

Move selected to child

Move selected to sibling

Move from right tree to left tree

Move selected to child

Move selected to sibling

Move inside left tree

Move selected Up | Down | Left

Move selected Up on level | Down on level

Move selected to child of

Move selected to sibling of

</> Source

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title> Moving items by API</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<link rel="stylesheet" type="text/css" href="../common/demo_style.css"/>
	<script>
		var myTree, myTree2;
		function doOnLoad(){
			myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree.enableSmartXMLParsing(true);
			myTree.load("../common/tree.xml");
			myTree2 = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
			myTree2.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree2.enableSmartXMLParsing(true);
			myTree2.load("../common/tree.xml")
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Moving items</h1>
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" class="tree_demo_samples"></div>
			</td>
			<td>
				<div id="treeboxbox_tree2" class="tree_demo_samples"></div>
			</td>
			<td rowspan="2" style="padding-left:25px" valign="top">
				<div>
					Move from left tree to right tree
				</div>
				<div>
					Move selected<a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'item_child',myTree2getSelectedItemId(),tree2)"> to child </a>
				</div>
				<div>
					Move selected <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'item_sibling',myTree2getSelectedItemId(),tree2)"> to sibling </a>
				</div>
				<br/>
				<div>
					Move from right tree to left tree
				</div>
				<div>
					Move selected<a href="javascript:void(0)" onclick="myTree2moveItem(myTree2getSelectedItemId(),'item_child',myTreegetSelectedItemId(),tree)"> to child </a>
				</div>
				<div>
					Move selected <a href="javascript:void(0)" onclick="myTree2moveItem(myTree2getSelectedItemId(),'item_sibling',myTreegetSelectedItemId(),tree)"> to sibling </a>
				</div>
				<br/>
				<div>
					Move inside left tree
				</div>
				<div>
					Move selected <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'up')"> Up </a> | <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'down')">Down</a> | <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'left')"> Left</a>
				<div>
					<div>
						Move selected <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'up_strict')"> Up on level </a> | <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'down_strict')">Down on level</a>
					</div>
						Move selected <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'item_child',this.nextSibling.value)"> to child of </a><select><option value="books">Books</option><option value="sport">Sport</option><option value="magazines">Magazines</option></select>
					</div>
					<div>
						Move selected <a href="javascript:void(0)" onclick="myTreemoveItem(myTreegetSelectedItemId(),'item_sibling',this.nextSibling.value)"> to sibling of </a><select><option value="books">Books</option><option value="sport">Sport</option><option value="magazines">Magazines</option></select>
					</div>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.