Navigation and Edit with keyboard

There is the possibility to enable keyboard navigation using the enableKeyboardNavigation() method.
You can use default keys or set own keys. Try to assign new keys and then press 8 or 2 key to move up/down, 6 or 4 to open/close, 8 to call function for selected item.
There are also some keys for editing:
- Press F2 to edit selected item
- Press Enter to close editor
- Use Cursor keys to navigate

Enable navigation
Disable navigation
set custom keys - numeric keypad (2,4,5,6,8)

Select any item in tree and use next keys
  • Up arrow - select upper item
  • Down arrow - select lower item
  • Right arrow - open item
  • Left arrow - close item
  • Enter - call item's action
  • F2 - edit
  • Esc - close editor
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title> Navigation and Edit with keyboard</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.enableSmartXMLParsing(true);
			myTree.enableItemEditor(true);
			myTree.enableDragAndDrop(true);
			myTree.enableItemEditor(true);
			myTree.enableKeyboardNavigation(true);
			myTree.load("../common/tree.xml");
		}
		var extra_keys=[["up",104],["down",98],["open",102],["close",100],["call",101]];
		if (dhx4.isOpera) extra_keys=[["up",56],["down",50],["open",54],["close",52],["call",53]];
		function m_f(id){
			document.getElementById("a_33").innerHTML=("Item "+id);
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Navigation and Edit with keyboard</h1>
	<p>There is the possibility to enable keyboard navigation using the enableKeyboardNavigation() method.<br/> You can use default keys or set own keys. Try to assign new keys and then press 8 or 2 key to move up/down, 6 or 4 to open/close, 8 to call function for selected item.
		<br/>There are also some keys for editing:<br/>
		- Press F2 to edit selected item<br/>
		- Press Enter to close editor<br/>
		- Use Cursor keys to navigate<br/>
	</p>
	<table>
			<tr>
				<td>
					<div id="treeboxbox_tree" class="tree_demo_samples"></div>
				</td>
				<td rowspan="2" style="padding-left:25px" valign="top">
					<a href="#" onClick="myTree.enableKeyboardNavigation(true);">Enable navigation</a><br>
					<a href="#" onClick="myTree.enableKeyboardNavigation(false);">Disable navigation</a><br>
					<a href='#' onclick='myTree.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
	<ul>
		<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>
	</ul>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.