DHTMLX Touch documentation

Grid Usage Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
	<script src="../../../codebase/touchui.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/touchui.css">
<style>
	.with_stops{
		font-size:15px;
	}
	.direct{
		font-size:15px;
		color:red;
	}
	.details{
		height:20px;
		padding: 0 4px;
		font-size:15px;
		line-height: 20px;
		color:#ffffff;
		text-shadow:0 1px 0 #333300;
		font-weight:bold;
		background-color:#669900; 
		background-image: -webkit-gradient(linear, left top, left bottom,  color-stop(0.0, #66cc00),color-stop(1.0, #669900) );
	}
	.check_flight{
		font-size:18px;
		width:120px;
		color:#ffffff;
		text-shadow:0 1px 0 #003399;
		height: 34px;
		border: none;
		cursor: pointer;
		margin-top: 4px;
		margin-right: 10px;
		padding-left:14px;
		padding-right:14px;
		background-color:transparent;
		background-image: url(./images/button_left.png), url(./images/button_right.png), url(./images/button_middle.png);
		background-position: top left, top right, center;
		background-repeat: no-repeat, no-repeat, repeat-x;
	}
</style>
<body>
 
	<div id="grid_container" style="width:450px;height:388px;"></div>
	<script>
		flights = [
			{id:1,from:"Moscow",to:"Bangkok",type:0,price:230,details:"best price",available:10},
			{id:2,from:"Oslo",to:"Cape Town",type:0,price:489,details:"best price",available:25},
			{id:3,from:"Viena",to:"Dubai",type:0,price:225,details:"",available:5},
			{id:4,from:"Viena",to:"Stockholm",type:0,price:225,details:"",available:2},
			{id:5,from:"Niew York",to:"London",type:0,price:429,details:"",available:5},
			{id:6,from:"Moscow",to:"Bangkok",type:1,price:589,details:"",available:0},
			{id:7,from:"Oslo",to:"Cape Town",type:1,price:489,details:"",available:2},
			{id:8,from:"Dubai",to:"Yerevan",type:1,price:225,details:"",available:0}
		]
		dhx.ui({
			container:"grid_container",
			rows:[{
				view:"grid",
				fields:[
					{
						id:"dir",
						label:"Direction",
						width:250,
						template:"#from# <img src='images/plane.png' style='vertical-align:middle'></img>#to#",
						sort:{
							by:"#from##to#"
						}
					},
					{
						id:"type",
						label:"Type",
						width:100,
						template:function(obj){
							return obj.type?"<span class='direct'>direct</span>":"<span class='with_stops'>with stops</span>";
						}
					},
					{
						id:"price",
						label:"Price",
						width:100,
						template:"$#price#",
						sort:{
							as:"int"
						}
					},
				],
				datatype:"json", 
				data:flights
			}]
		});	
	</script>
 
</body>
</html>