height dynamic datatable

Webix JS
#1 
{ 
	id: "datatable_preventivo_prodotti", css:"my_style", 
	view:"datatable", autoConfig:true, footer:true, 
	editable:true, resizeColumn: true, resizeRow: true, 
	columns:[
		{ id:"IdProdotto", header:"Id Prodotto", fillspace:true,hidden:true}, 
		{ 
			id:"cCodiceProdotto", fillspace:true, 
			header:"Codice",footer:{text:"Totale:", colspan:3} 
		},
		{ id:"cNomeProdotto", fillspace:true, header:"Prodotto" },
	]
},
{ margin:5, cols:[
	{},
	{ 
		view:"button", value:"Salva" , type:"form",
		width:120, align:"right",click:Save_Preventivo_Cliente
	},
	{ 
		view:"button", value:"Annulla", width:120, 
		align:"right", click:"$$('window_preventivo').hide()"
	}
]}

the problem is that toolbar does not follow the downsizing

#2

AFAICS, only the following scenarios are available:

  • If height isn’t specified and the datatable adjusts to the available space.

  • If height is defined strictly.

In both cases, resize of the row won’t affect the size of the grid, but the height of the scroll area will change accordingly.

  • If you set autoheight:true for the grid, it will be resized regarding the height of the rows, but the vertical scroll will be constantly disabled.

But can you please clarify, what behavior do you need/expect?

#3

the problem is that if you manually imposed the height of the datatable to 500, in the notebook I see the layout, if I set the height of more than 500 datatable I do not see the toolbar
if i scroll datatable with key arrow not problem,
whereas with the mouse wheel datatable not scroll

#4

Check the following snippet http://webix.com/snippet/a1f38d94

It uses the same code as in your case and with any screen size, the toolbar is still visible ( I have removed autoConfig:true from the code, as it is not necessary in case of predefined config )

#5

hi and thanks.
Understand the problem!
Sidebar create conflict!
code is this:
webix.ui({
rows: [
{view: “toolbar”, padding:3,
elements: [
{view: “button”, type: “icon”, icon: “bars”,width: 37, align: “left”, css: “app_button”, click: function(){$$("$sidebar1").toggle() }
},
{ view: “label”, label: “PIERUCCI GROUP”},
{},
{},
{},
{
view:“menu”,
id : “menu”,
data:[
{value:“Utente”, submenu:[
{id: 1, icon: “sign-out”, value: “Logout”}
] }
],
type:{
subsign:true,
height:30
},
openAction:“click”,
on:{
onMenuItemClick:function(id){
if(id==1){
webix.confirm({
text:“Logout.
Sicuro?”, ok:“Si”, cancel:“No”,
callback:function(res){
if(res){
window.location.href=“login.html”;
}
}
});
}
}
}
}
]
},
{
cols:[
{
view: “sidebar”,
data: menu_data,
width:280,
height:800,
on:{
onAfterSelect: function(id){
$$(“mview_main”).setValue(id);
}
}
},
{ view:“resizer” },
{id:“mview_main”, animate:true,
cells:[
{
id: “datatable_preventivo_prodotti”,
view:“datatable”, footer:true, pager:“pagerProdottiSottoScorta”,
columns:[
{ id:“IdProdotto”, header:“Id Prodotto”, fillspace:true,hidden:true},
{ id:“cCodiceProdotto”, fillspace:true, header:“Codice”,footer:{text:“Totale:” }},
{ id:“cNomeProdotto”, fillspace:true, header:“Prodotto” },
],
url: “load.php?cmd=load_prodotti_sottoscorta”,
},
{
view:“pager”,
id:“pagerProdottiSottoScorta”,
size:20,
group:10
},
{
view:“toolbar”, cols:[
{},
{ view:“button”,id:“btnAddProdottoStandby”,name:“btnAddProdottoStandby”, label: ‘Ordina Prodotti’, type:“form”, width: 140, align: ‘right’}
]
}
]
}
]
}
]
});

#6

or problem is that datatable is contains in multiview?

#7

try this code, with sidebar and multiview

<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
	<link rel="stylesheet" href="webix/codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="webix/codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="webix/codebase/sidebar.js"></script>
	<link rel="stylesheet" type="text/css" href="webix/codebase/sidebar.css">
    <link rel="STYLESHEET" type="text/css" href="webix/codebase/dataview_styles.css">
</head>
<body>
<script>
var menu_data = [
		{id: "clienti_menu", icon: "webix_icon icon fa-users", value:"Clienti", data:[
			{id: "preventivi_cliente", icon: "webix_icon icon fa-list-alt", value:"Ordini StandBy"},
			{id: "ordini_cliente", icon: "webix_icon icon fa-list-alt", value:"Ordini da Preparare"},
			{id: "ordini_bollettizzare", icon: "webix_icon icon fa-list-alt", value:"Ordini in Partenza"},
			{id: "ordini_monitorare", icon: "webix_icon icon fa-list-alt", value:"Ordini da Monitorare"},
			{id: "ordini_chiusi", icon: "webix_icon icon fa-list-alt", value:"Ordini Chiusi"},
		]}
	];
		
webix.ui({
		rows: [
				{view: "toolbar", padding:3, 
					elements: [
						{view: "button", type: "icon", icon: "bars",width: 37, align: "left", css: "app_button", click: function(){$$("$sidebar1").toggle()	}
				},
				{ view: "label", label: "PIERUCCI GROUP"},
				{},        
				{},
				{},
				{
					view:"menu", 
					id : "menu", 
					data:[ 
						   {value:"Utente", submenu:[ 
						   {id: 1, icon: "sign-out", value: "Logout"}
						] } 
					], 
					type:{
						subsign:true,
						height:30
					},
					openAction:"click",
					on:{
						onMenuItemClick:function(id){
							if(id==1){
								webix.confirm({
									text:"Logout. <br/> Sicuro?", ok:"Si", cancel:"No",
									callback:function(res){
										if(res){
											window.location.href="login.html";
										}
									}
								});
							}
						}
					}
				}
			]
			},
			{
				cols:[
					{
						view: "sidebar",
						data: menu_data,
						width:280,
						//height:300,
						on:{
							onAfterSelect: function(id){      
								$$("mview_main").setValue(id);
							}
						}
					},
					{ view:"resizer" },
					{id:"mview_main", animate:true, 
						cells:[
								{ 
									id: "datatable_preventivo_prodotti", 
									view:"datatable", footer:true, pager:"pagerProdottiSottoScorta",
									columns:[
										{ id:"IdProdotto", header:"Id Prodotto", fillspace:true,hidden:true}, 
										{ id:"cCodiceProdotto", fillspace:true, header:"Codice",footer:{text:"Totale:" }},
										{ id:"cNomeProdotto", fillspace:true, header:"Prodotto" },
									],
									url: "load.php?cmd=load_prodotti_sottoscorta",
								},
								{
									view:"pager", 
									id:"pagerProdottiSottoScorta",
									size:20,
									group:10
								},
								{
									view:"toolbar", cols:[
									{},
									{ view:"button",id:"btnAddProdottoStandby",name:"btnAddProdottoStandby", label: 'Ordina Prodotti',  type:"form", width: 140, align: 'right'}
									]
								}
							]							
						}
				]
			}
		]
	});
</script>
</body>
</html>