Updating server datasource

Using dhtmlxDataProcessor you can avoid any script programming. Just implement server side (samples are available)

Add node as child of selected (or top)
Add node next to selected
Delete selected row
Single click on selected item to edit it.
Move items between levels using drag-n-drop
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Updating server datasource</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, myDataProcessor;
		function doOnLoad(){
			myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree.enableDragAndDrop(true);
			myTree.enableItemEditor(true);
			myTree.load("php/get.php");
			//init dataprocessor and assign verification function
			myDataProcessor = new dataProcessor("php/update.php");
			//add after-update event handler
			myDataProcessor.attachEvent("onAfterUpdate",function(nodeId,cType,newId){
				doLog("Item was "+cType+"ed. Item id is " + newId)
			});
			myDataProcessor.init(myTree);
		}
		function doLog(str){
			var log = document.getElementById("logarea");
			log.innerHTML = log.innerHTML+str+"</br>"
			log.scrollTop = log.scrollHeight;
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Updating server datasource</h1>
	<p>Using dhtmlxDataProcessor you can avoid any script programming. Just implement server side (samples are available)</p>
	<table>
		<tr>
			<td>
				<a href="#" onclick="myTree.insertNewChild(myTree.getSelectedItemId()||0,(new Date()).valueOf(),'New item')">Add node as child of selected (or top)</a> <br/>
				<a href="#" onclick="myTree.insertNewNext(myTree.getSelectedItemId(),(new Date()).valueOf(),'New item')">Add node next to selected</a> <br/>
				<a href="#" onclick="var id = myTree.getSelectedItemId(); if (id) myTree.deleteItem(id);">Delete selected row</a><br/>
			</td>
			<td>
			</td>
		</tr>
		<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:298px;width:400px;overflow:auto; padding:3px;"></div>
			</td>
		</tr>
		<tr>
			<td>
				Single click on selected item to edit it.<br>
				Move items between levels using drag-n-drop
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

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