DHTMLX Docs & Samples Explorer

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
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<script  src="../../codebase/ext/dhtmlxtree_sb.js"></script>
 
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
            <div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
            <a href="#" onClick="tree.sortTree(tree.getSelectedItemId(),'ASC',1);">Reorder selected branch (ASC)</a><br>
            <a href="#" onClick="tree.sortTree(tree.getSelectedItemId(),'DES',1);">Reorder selected branch (DES)</a><br>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
 
<script>
function treeDrop(id, target, target_before, tree_source, tree_dest) {
    tree_dest.sortTree(target, 'ASC', 0);
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableSmartXMLParsing(true);
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableThreeStateCheckboxes(true);
tree.loadXML("../common/tree3_14_selection_sorting_navigation.xml");
tree.setDropHandler(treeDrop);
 
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree2.enableSmartXMLParsing(true);
tree2.enableCheckBoxes(true);
tree2.enableDragAndDrop(true);
tree2.enableThreeStateCheckboxes(true);
tree2.loadXML("../common/tree3_14_selection_sorting_navigation.xml");
tree2.setDropHandler(treeDrop);
</script>