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.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.
 
			  },
			  {id:"grid",view:"grid", header:true, //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#"
			                                }],
							datatype:"xml", // the type of the data by which we will fill grid up
                                                        url:"xml/names.xml" // the relative path to our xml file
				   },
			  ]
		 }]
             })
			 $$('grid').attachEvent("onAfterSelect", fill_form);
 
			 function fill_form(id){
                               $$("topForm").setValues( $$("grid").item(id) );
			 }
 
			 function add_row(id) {
			       $$("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>

XML structure

names.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <item id="1">
    <name>Alex</name>
    <email> alex@br.aa </email>
  </item>
  <item id="2">
    <name>Peter</name>
    <email> peter@dg.ee </email>
  </item>
  <item id="3">
    <name>John</name>
    <email> john@ge.hh </email>
  </item>
  <item id="4">
    <name>Ali</name>
    <email> ali@rt.ff </email>
  </item>
</data>