<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_xw.js"></script>
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
        Move selected <a href="javascript:void(0)" onClick="tree.moveItem(tree.getSelectedItemId(),'up')"> Up </a> | <a href="javascript:void(0)" onClick="tree.moveItem(tree.getSelectedItemId(),'down')">Down</a> | <a href="javascript:void(0)" onClick="tree.moveItem(tree.getSelectedItemId(),'left')"> Left</a>
        <br/>
        <div>
        <a  href="javascript:void(0)" onClick="trser();">Serialize</a></div>
        </td>
    </tr>
</table>
 
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.loadXML("../common/tree3.xml");
function trser() {
    var out = tree.serializeTree();
    out = out.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\&lt\;item/g, "<br>&lt;item");
    document.getElementById("out_zone").innerHTML = out;
    document.getElementById("out_zone").style.display = "";
}</script>
<br><br>
  <div id="out_zone" style="display:none;width:550px;height:200px;overflow:auto;"></div>