User data

User data

Any item in the tree or the tree itself can have assigned data.
Assignment can be done through API or through XML initialization.

Get tree data for books item(was preseted from XML)
Get tree user data
Set tree user data: name, value

Get item user data
Set item user data: name, value

Serialize

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>
 
 
<table>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver; "></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
        
        <a href="#" onClick="alert(tree.getUserData(0,document.getElementById('tuds').value))">Get tree data for books item(was preseted from XML)</a> <select id="tuds"><option value="author">author<option value="mode">mode<option value="created">created</select><br>
        <a href="#" onClick="alert(tree.getUserData(0,document.getElementById('tud1').value))">Get tree user data</a><input id="tud1" type="text"><br>
        <a href="#" onClick="tree.setUserData(0,document.getElementById('tud2').value,document.getElementById('tud3').value)">Set tree user data: </a> name<input id="tud2" type="text">, value <input id="tud3" type="text"><br><br><br>
        <a href="#" onClick="alert(tree.getUserData(tree.getSelectedItemId(),document.getElementById('iud1').value))">Get item user data</a><input id="iud1" type="text"><br>
        <a href="javascript:void(0);" onClick="tree.setUserData(tree.getSelectedItemId(),document.getElementById('iud2').value,document.getElementById('iud3').value) ">Set item user data: </a> name<input id="iud2" type="text">, value <input id="iud3" type="text"><br><br>
        <a href='#' onclick='document.getElementById("a_ter").style.display="";document.getElementById("a_ter").innerHTML=wellform(tree.serializeTree())'>Serialize</a>
        </td>
    </tr>
</table>
<br>    
 
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.setSerializationLevel(true, false);
tree.loadXML("../common/tree_ud.xml");
 
function wellform(a) {
    return a.replace(/</g, "&lt;").replace(/>/g, "&gt;<br/>");
}</script>
<div id="a_ter" style="width:500px;height:200;overflow:auto;display:none;"></div>