Full code of the solution

HTML file

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
        <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
	<script type="text/javascript" charset="utf-8">
		DHTMLX_SKIN = "touch"; // specifies a type of the border
	</script>
	<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    	<div id="groupBox" style="width:100%;height:100%">
    	</div>
	              <script type="text/javascript" charset="utf-8">
 dhx.ready(function(){
 
	      dhx.ui({ container:"groupBox", type:"head",
		   rows:[ // the first row of the layout where we specify toolbar
		         { view:"toolbar", id:"Bar", type:"MainBar", data:[{type:"roundbutton", id:"add", name:"add", label:"Add", click:"add_row"},// in 'data' parameter we put controls' definitions
																   {type:"roundbutton", id:"delete", name:"delete", label:"Delete", click:"delete_row"}] // in our case these are 2 round buttons
				},
				{cols:[ // the second row we divide into 2 columns
 
				{ width: 340, view:"form",id:"topForm", data:[{type:"text", id:"name", label: 'Name',  position: "label-left", align: "center", labelAlign: "center"}, // the second column of the second row of the layout
									      {type:"text", id:"email", label: 'email',  position: "label-left", align: "center", labelAlign: "center"},// here we create form object and 3 its controls.
									      {type:"button", label:"Save", click:"save_form"}]
				},
				{id:"grid",view:"grid", header:true, url:'data.php', //in the second column we create grid
		                                        fields:[												
												       {	id:"Name", // 'fields' parameter lets to define grid cols
														width:170,// the width of the first grid col
														label:"Name",// the name of the first grid col
														template:"#name#" // 'template' specifies data which will be presented in the col
													},
													{ 	id:"email",// the second col of the grid
														width: 800,
														label:"email",
														template:"#email#"
												        }]
			  }]
		 }]
             })
 
             var dp = new dhx.DataProcessor({
	     master:$$('grid'),//specifies a linked datasource
	     url:"data.php"//defines the path to the file which will get change requests
             });
 
             dp.link($$('topForm'));
 })
 
                        function save_form() {
	                       this.save();
                        };
 
                        function add_row() {
			       $$("grid").select($$("grid").add({}));
                         }
 
			 function delete_row() {
			       var id=$$("grid").getSelected();
			       dhx.confirm({
			 	     title: "Delete",
				     message: "Are you sure you want to delete the selected contact?",
				     callback: function(result) {
					                         if (result) {
								          $$("grid").remove(id);
								 } 
			             }
			       });
			 }
 
	      </script>
	</body>
</html>

PHP files

data.php

<?php
	require("../codebase/connector/data_connector.php");
	$res=mysql_connect("localhost","root","");
        mysql_select_db("dhtmlx_quick_start");
 
	$gridConn = new JSONDataConnector($res,"MySQL");
	$gridConn->render_table("contacts","contact_id","name,email");
?>