<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>
<script  src="../../codebase/ext/dhtmlxtree_li.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>
        <div>
        <a  href="javascript:void(0)" onclick="tree.insertNewItem(tree.getSelectedItemId(),'new','new item',null,'folderClosed.gif','folderClosed.gif','folderOpen.gif','SELECT');">Add item</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.setItemText(tree.getSelectedItemId(),'Some weird text')">Rename item</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.saveOpenStates('aqa')">Save state</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.loadOpenStates('aqa')">Load state</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="if (confirm('Because tree is unlimited it will never stoped, you will need to close browser or refresh it to stop process')) tree.openAllItemsDynamic()">Open all items</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.openItemsDynamic('0_2,0_2_3,0_2_3_1',true)">Open item 2-3-1 </a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.refreshItem(tree.getSelectedItemId())">Refresh selected Item</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.smartRefreshItem(tree.getSelectedItemId())">Refresh selected Item (smart mode)</a></div>
        <div>
        <a  href="javascript:void(0)" onclick="tree.refreshItem(0)">Refresh root</a></div>
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
 
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/");
tree.enableDragAndDrop(true);
tree.setXMLAutoLoadingBehaviour("id");
//tree.setLockedIcons("close2.gif","close2.gif","close2.gif");
tree.setChildCalcMode("child");
tree.setXMLAutoLoading("php/xml.php");
tree.enableSmartXMLParsing(true);
tree.loadXML("php/xml.php");
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;
}</script>
<br><br>
  <div id="out_zone"></div>