DHTMLX Docs & Samples Explorer

Storing state in Cookies

Open state of the tree can be easily saved to cookies. So you can test this functionality by saving the tree state, refreshing the page and restoring the previous state after that.
The tree can be serialized to XML, you should define the level of data serialization in related checkboxes.
Save open state
Restore open state
Get tree XML   



THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.
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_xw.js"></script>    
Open state of the tree can be easily saved to cookies. So you can test this functionality by saving the tree state, refreshing the page and restoring the previous state after that.</br>
The tree can be serialized to XML, you should define the level of data serialization in related checkboxes.
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver; "/>
        </td>
        <td valign="top">
        <a href="javascript:void(0)" onClick="tree.saveOpenStates()">Save open state</a><br>
        <a href="javascript:void(0)" onClick="tree.loadOpenStates()">Restore open state</a><br>
        <a href="javascript:void(0)" onClick="tree.setSerializationLevel(document.getElementById('sm1').checked,document.getElementById('sm2').checked);  document.getElementById('zet1').value=tree.serializeTree()">Get tree XML</a> <input id="sm1" type="checkbox"><label for="sm1">User Data</label>&nbsp;&nbsp;<input id="sm2" type="checkbox"><label for="sm2">Details</label><br>
        <textarea id="zet1" style="width:300px; height:200px;"></textarea>
        </td>
    </tr>
</table>
<br>
 
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
tree.enableDragAndDrop(true);
tree.loadXML("../common/tree.xml", function() {
    tree.loadOpenStates()
    });
</script> <br><br>