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

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title> Editable items</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.enableDragAndDrop(true);
			myTree.setDragBehavior('complex');
			myTree.enableKeyboardNavigation(true);
			myTree.enableItemEditor(true);
			myTree.setOnEditHandler(m_func);
			myTree.load("../common/tree.xml");
		}
		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(){
			myTree.setEditStartAction(document.getElementById('a1231').checked,document.getElementById('a1232').checked);
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Editable items</h1>
	<p>Double click on any item to edit it.<br/>
		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.</p>
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" class="tree_demo_samples"></div>
			</td>
			<td rowspan="2" style="padding-left:25px" valign="top">
				<a href="#" onClick="myTree.enableItemEditor(true);">Enable editing</a><br>
				<a href="#" onClick="myTree.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:240px; overflow:auto;'></div>
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

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