DHTMLX Docs & Samples Explorer

Custom sorting routine

In dhtmlxTree nodes can be sorted in ascendent or descendent order. Select an item in the tree and test this funcitonality using an appropriate action link.

Custom sorting sorts by Author's first name
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>    
Custom sorting sorts by Author's first name    
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" 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>
</table>
<br>
<script>
function sort_func(a, b) {
    a = (tree.getItemText(a)).split(" ")[1] || "";
    b = (tree.getItemText(b)).split(" ")[1] || "";
    return ((a > b) ? 1: -1);
}
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.setCustomSortFunction(sort_func);
</script> <br><br>