<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"></script>
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
            <a href="#" onClick="tree.enableKeyboardNavigation(true);">Enable navigation</a><br>
            <a href="#" onClick="tree.enableKeyboardNavigation(false);">Disable navigation</a><br>
            <a href='#' onclick='tree.assignKeys(extra_keys);'>
            set custom keys - numeric keypad (2,4,5,6,8)
            </a>
            <br>
            <br>
            <b><div id='a_33'></div></b>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
 
Select any item in tree and use next keys
    <li>Up arrow - select upper item</li>
    <li>Down arrow - select lower item</li>
    <li>Right arrow - open item</li>
    <li>Left arrow - close item</li>
    <li>Enter - call item's action</li>
    <li>F2 - edit</li>
    <li>Esc - close editor</li>
<script>
var extra_keys = [["up", 104], ["down", 98], ["open", 102], ["close", 100], ["call", 101]];
if (_isOpera);
extra_keys = [["up", 56], ["down", 50], ["open", 54], ["close", 52], ["call", 53]];
function m_f(id) {
    document.getElementById("a_33").innerHTML = ("Item " + id);
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_vista/");
tree.enableSmartXMLParsing(true);
tree.enableItemEditor(true);
tree.enableDragAndDrop(true);
tree.enableItemEditor(true);
tree.enableKeyboardNavigation(true);
tree.loadXML("../common/tree3_14_selection_sorting_navigation.xml");</script>
<br><br>