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 |
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
<title>Storing state in Cookies</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<link rel="stylesheet" type="text/css" href="../common/demo_style.css"/>
<script>
var myTree;
function doOnLoad(){
myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
myTree.enableDragAndDrop(true);
myTree.load("../common/tree.xml",function(){myTree.loadOpenStates()})
}
</script>
</head>
<body onload="doOnLoad()">
<h1>Storing state in Cookies</h1>
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" class="tree_demo_samples"></div>
</td>
<td valign="top">
<a href="javascript:void(0)" onClick="myTree.saveOpenStates()">Save open state</a><br>
<a href="javascript:void(0)" onClick="myTree.loadOpenStates()">Restore open state</a><br>
<a href="javascript:void(0)" onClick="myTree.setSerializationLevel(document.getElementById('sm1').checked,document.getElementById('sm2').checked); document.getElementById('zet1').value=myTree.serializeTree()">Get tree XML</a> <input id="sm1" type="checkbox"><label for="sm1">User Data</label> <input id="sm2" type="checkbox"><label for="sm2">Details</label><br>
<textarea id="zet1" style="width:300px; height:238px;"></textarea>
</td>
</tr>
</table>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.