Horizondal y Verical scroll on grid and template views

Discontinued products DHTMLX Touch
#1

Hello,
as the title says I can not realize a vertical and horizontal scroll at the same time on components. My cases are a grid view and a template view. I tried to do something like this:

			{
	 			view:"scrollview",
	 			scroll:"x",
	 			content:{
					view:'grid',
                	datatype:'xml',
                	scroll:"y",   
               		select:true,
               		header: true,
               		id:'ewmon_grid_domain'
        		} 
			}

but it does not work (I also tried with the template view and the result is the same)

How can I solve this problem?

Thanks for your help
Danilo

#2

you need not scrollview for that, just use

view:'grid', datatype:'xml', scroll:"yx", //enables 2-way scroll for the view

#3

Hello Stanislav,
I did what you said but it did not work I downloaded the last version but in this way allows me just the vertical scrolling?!?!?!?!

#4

Hello,

sorry, there was a typo in scroll value. Please try “xy” instead of “yx”:

scroll:“xy”

#5

Hello ,
I just add the scroll:“xy” ,but it doesn’t work ,please !

        
<body>

	<h1>DataGrid</h1>
	
	<div id="grid_container" style="width:300px;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:"grid",
				//scroll:true,
				scroll:"xy",  //added
				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:100,
						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;'>";
			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>

Thx for help in advance!

#6

Hello,

please have a look at the attached sample (we included the latest touchui libs in the sample). “xy” works for grid.
grid.zip (79.4 KB)