Smart XML parsing and Sorting

Try to sort nodes in the first tree using an appropriate action link.
Then drag-and-drop any item from the second tree into the first one, you will see that the dropped item will be set in the ASC order.
Both trees are loaded in the SmartXMLParsing mode, which allows to operate with huge well-formed trees.

	Reorder selected branch (ASC) Reorder selected branch (DES)

</> Source

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Smart XML parsing and Sorting</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.enableCheckBoxes(true);
			myTree.enableDragAndDrop(true);
			myTree.enableThreeStateCheckboxes(true);
			myTree.load("../common/tree3_14_selection_sorting_navigation.xml");
			myTree.setDropHandler(treeDrop);
			myTree2 = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
			myTree2.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree2.enableSmartXMLParsing(true);
			myTree2.enableCheckBoxes(true);
			myTree2.enableDragAndDrop(true);
			myTree2.enableThreeStateCheckboxes(true);
			myTree2.load("../common/tree3_14_selection_sorting_navigation.xml");
			myTree2.setDropHandler(treeDrop);
		}
		function treeDrop(id, target, target_before, tree_source, tree_dest) {
			tree_dest.sortTree(target,'ASC',0);
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Smart XML parsing and Sorting</h1>
	<p>Try to sort nodes in the first tree using an appropriate action link.<br/>
		Then drag-and-drop any item from the second tree into the first one, you will see that the dropped item will be set in the ASC order.
		<br>Both trees are loaded in the SmartXMLParsing mode, which allows to operate with huge well-formed trees.</p>
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" class="tree_demo_samples"></div><br>
				<div id="treeboxbox_tree2" class="tree_demo_samples"></div>
			</td>
			<td rowspan="2" style="padding-left:25px" valign="top">
				<a href="#" onClick="myTree.sortTree(myTree.getSelectedItemId(),'ASC',1);">Reorder selected branch (ASC)</a><br>
				<a href="#" onClick="myTree.sortTree(myTree.getSelectedItemId(),'DES',1);">Reorder selected branch (DES)</a><br>
			</td>
		</tr>
		<tr>
			<td>
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

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