grid can scroll to x and at the same time it can scroll to y

Discontinued products DHTMLX Touch
#1

Hi,
how can grid scroll to the X axis direction in the slide and at the same time can scroll to the Y axis direction in the slide? please

Thx in advance!

#2

Hi,

try to place it into scrollview:

{ view:"scrollview", scroll:"x", content:{ width: 600, id:"grid", ... } }

#3

Hello,Alexandra
It doesn’t work that the grid can’t scroll to the X axis direction in the slide , give annother suggestion please! Thx.

<body>
	<h1>DataGrid</h1>
	
	<div id="grid_container" style="width:700px;height:288px;"></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}
		]
		
		var grid = dhx.ui({
			container:"grid_container",
			rows:[
			{
				view:"scrollview",
				scroll:"x",
				content: {
				view:"grid",
				scroll:'y',
				fields:[
					{
						id:"dir",
						label:"Direction",
						width:250,
						template:"#from#&nbsp;<img src='images/plane.png' style='vertical-align:middle'></img>&nbsp;#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:500,
						template:"$#price#",
						sort:{
							as:"int"
						}
					},
					{
						id:"details",
						label:"",
						width:250,
						template:function(obj){
							return create_price_marker(obj.details)+(obj.$selected?create_fight_button(obj.available):"");
						}
					}
				],
				datatype:"json", 
				data:flights
			}
			 }
			]
		});	
		
		
		function create_fight_button(available){
			var str = "<div style='float:right;width:145px;padding-top:3px'>";
			str += "<input onclick='checkFight("+available+");' type='button' class='dhx_native_button' value='check flight'>";
			str += "</div>";
			return str;				
		};
		
		function create_price_marker(label){
			return (label==""?"":"<div style='float:left;height:100%;padding-top:10px'><div class='details'>"+label+"</div></div>");	
		}
		
		function checkFight(value){
			if(value) alert(value+" tickets are available");
			else
				alert("Sorry, there are not available tickets for this flight");
		}
		
	</script>

</body>