<!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>