Event handlers

This JavaScript tree example illustrates the ability to assign user-defined functions to different event handlers (e.g. Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect). If you try to change a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected. Confirm box will pop up if user opens or closes a node.
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.

Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)
Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)
node ID will be passed to the function specified as argument for setOpenAction(aFunc)
node ID will be passed to the function specified as argument for setDblClickAction(aFunc)

</> Source

<!DOCTYPE html>
<html>
<head>
	<title>Event handlers</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.enableCheckBoxes(1);
			myTree.enableDragAndDrop(1);
			myTree.attachEvent("onOpenEnd",function(nodeId, event){doLog("An id of open item is "+nodeId);});
			myTree.setOnClickHandler(tonclick);
			myTree.setOnCheckHandler(toncheck);
			myTree.setOnDblClickHandler(tondblclick);
			myTree.load("../common/tree.xml", function(){
				myTree.setOnOpenHandler(tonopen);
				myTree.setDragHandler(tondrag);
			});
		}
		function doLog(str){
			var log = document.getElementById("logarea");
			log.innerHTML = log.innerHTML+str+"<br/>"
			log.scrollTop = log.scrollHeight;
		}
		function tonclick(id){
			doLog("Item "+myTree.getItemText(id)+" was selected");
		};
		function tondblclick(id){
			doLog("Item "+myTree.getItemText(id)+" was doubleclicked");
		};
		function tondrag(id,id2){
			return confirm("Do you want to move node "+myTree.getItemText(id)+" to item "+myTree.getItemText(id2)+"?");
		};
		function tonopen(id,mode){
			return confirm("Do you want to "+(mode>0?"close":"open")+" node "+myTree.getItemText(id)+"?");
		};
		function toncheck(id,state){
			doLog("Item "+myTree.getItemText(id)+" was " +((state)?"checked":"unchecked"));
		};
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Event handlers</h1>
	<p>This JavaScript tree example illustrates the ability to assign user-defined functions to different
		event handlers (e.g. <em>Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect</em>). If you try to change
		a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected.
		Confirm box will pop up if user opens or closes a node.<br>
		So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize
		tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.</p>
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" class="tree_demo_samples"></div>
			</td>
			<td rowspan="2" style="padding-left:25px" valign="top">
				<div id="logarea" style="background-color:#d3d3d3;height:250px;width:400px; padding:3px; overflow:auto;"></div>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
	<ul>
		<li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
		<li>Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)</li>
		<li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
		<li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
	</ul>
</body>
</html>

Documentation

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