Editable items

Double click on any item to edit it.
Title is validated and can't be empty. To enable or disable nodes editing click on an appropriate action link. Any editing action report you perform will be rendered in the scrolling field.

Enable editing
Disable editing
Click on selected Double click

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_kn.js"></script>
<script src="../../codebase/ext/dhtmlxtree_ed.js" type="text/javascript"></script>
 
<table>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree" style="width:250px; height:220px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
            <a href="#" onClick="tree.enableItemEditor(true);">Enable editing</a><br>
            <a href="#" onClick="tree.enableItemEditor(false);">Disable editing</a><br>
            <input type='checkbox' id='a1231' onClick="au()" checked='true'>Click on selected
            <input type='checkbox' id='a1232' onClick="au()" checked='true'>Double click
            <div id='a_1' style='height:160px; overflow:auto;'></div>
        </td>
    </tr>
</table>
 
<script>function m_func(state, id, tree, value) {
    document.getElementById("a_1").innerHTML += "<div>Item " + id + " - " + (state == 0 ? "start editing": (state == 1 ? "editor launched": (state == 2 ? "editor closing": "editor closed"))) + "</div>";
    if ((state == 2) && (value == ""))
        return false;
    return true;
}
function au() {
    tree.setEditStartAction(document.getElementById('a1231').checked, document.getElementById('a1232').checked);
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
tree.enableSmartXMLParsing(true);
tree.enableDragAndDrop(true);
tree.setDragBehavior('complex');
tree.enableKeyboardNavigation(true);
tree.enableItemEditor(true);
tree.setOnEditHandler(m_func);
tree.loadXML("../common/tree.xml");</script>