Tabbar & Layout + Grid

[Vale1976]

This is my code:

<link rel="STYLESHEET" type="text/css" href="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<script  src="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
<script  src="dhtmlxSuite/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>

<div id="a_tabbar" style="width: auto; height: 390px;"/>
<script>
tabbarVisualizzaContratto = new dhtmlXTabBar('a_tabbar', 'top');
tabbarVisualizzaContratto.setSkin('default');
tabbarVisualizzaContratto.setImagePath('dhtmlxSuite/dhtmlxTabbar/codebase/imgs_personal/');
tabbarVisualizzaContratto.enableTabCloseButton(false);
tabbarVisualizzaContratto.addTab('a1', '&nbsp;&nbsp;Dati anagrafici e Contratto&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a2', '&nbsp;&nbsp;Always-on flat&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a3', '&nbsp;&nbsp;Always-on consumo&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a4', '&nbsp;&nbsp;Sicurezza&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a5', '&nbsp;&nbsp;VoIP&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a6', '&nbsp;&nbsp;Wireless&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a7', '&nbsp;&nbsp;Interoperabilità&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.addTab('a8', '&nbsp;&nbsp;Variazioni&nbsp;&nbsp;', '*');
tabbarVisualizzaContratto.setTabActive('a1');
tabbarVisualizzaContratto.setContentHTML('a1', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a2', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a3', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a4', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a5', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a6', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a7', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a8', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
</script>
</div>

The tabbar works very well.

How can I integrate a dhtmlxLayout into the “a1” tabbar and a dhtmlxGrid into the “a2” tabbar? I’ve tried to refer to http://www.dhtmlx.com/docs/products/dhtmlxTabbar/samples/05_components/03_layout_inside.html and http://docs.dhtmlx.com/doku.php?id=dhtmlxtabbar:attaching_components_to_the_tabbar but I wasn’t able to achieve my scope.

Please…help me!!!

[Vale1976]

I’ve changed the code as follows;

tabbarVisualizzaContratto = new dhtmlXTabBar('a_tabbar', 'top');
tabbarVisualizzaContratto.setSkin('default');
tabbarVisualizzaContratto.setImagePath('dhtmlxSuite/dhtmlxTabbar/codebase/imgs_personal/');
tabbarVisualizzaContratto.enableTabCloseButton(false);
tabbarVisualizzaContratto.addTab('a1', '  Dati anagrafici e Contratto  ', '*');
tabbarVisualizzaContratto.addTab('a2', '  Always-on flat  ', '*');
tabbarVisualizzaContratto.addTab('a3', '  Always-on consumo  ', '*');
tabbarVisualizzaContratto.addTab('a4', '  Sicurezza  ', '*');
tabbarVisualizzaContratto.addTab('a5', '  VoIP  ', '*');
tabbarVisualizzaContratto.addTab('a6', '  Wireless  ', '*');
tabbarVisualizzaContratto.addTab('a7', '  Interoperabilità  ', '*');
tabbarVisualizzaContratto.addTab('a8', '  Variazioni  ', '*');
tabbarVisualizzaContratto.setTabActive('a1');
tabbarVisualizzaContratto.setContentHTML('a1', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
var gridAOF = tabbarVisualizzaContratto.cells('a2').attachGrid();
gridAOF.setSkin('modern');
gridAOF.setImagePath('dhtmlxSuite/dhtmlxGrid/codebase/imgs/');
gridAOF.setHeader('Cliente,Contratto,Data Contratto,Stato Contratto,BC Team,PM,idContratto');
gridAOF.attachHeader('#text_filter,#text_filter,#text_filter,#select_filter,#select_filter,#select_filter,#select_filter');
gridAOF.setColSorting('str,str,date,str,str,str,int');
gridAOF.setInitWidths('340,310,120,192,222,93,0');
gridAOF.setColTypes('ro,ro,dhxCalendar,ro,ro,ro,coro');
gridAOF.setColAlign('left,left,center,center,center,center,center');
gridAOF.enableRowsHover(true,'grid_hover');
gridAOF.init();

var datagrid = [['Cliente1,Contratto1,01/01/2010,Stato1,BC Team1,PM1,1'],['Cliente2,Contratto2,01/01/2010,Stato2,BC Team2,PM2,2']];
gridAOF.parse(datagrid,'jsarray');

gridAOF.attachEvent('onEditCell',function(stage,id,index) {
	if (index == 3) return false;
	return true; }
);
tabbarVisualizzaContratto.setContentHTML('a3', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a4', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a5', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a6', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a7', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
tabbarVisualizzaContratto.setContentHTML('a8', '<div style="background-color: #ffff99; height: 100%">ciao</div>');

but I can’t see the datagrid in the “a2” tabbar. And the the next tabbars are empty

[Vale1976]

This is the entire script…but it doesn’t work as expected.

<script>
	tabbarVisualizzaContratto = new dhtmlXTabBar('a_tabbar', 'top');
	tabbarVisualizzaContratto.setSkin('default');
	tabbarVisualizzaContratto.setImagePath('dhtmlxSuite/dhtmlxTabbar/codebase/imgs_personal/');
	tabbarVisualizzaContratto.enableTabCloseButton(false);
	tabbarVisualizzaContratto.addTab('a1', '&nbsp;&nbsp;Dati anagrafici e Contratto&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a2', '&nbsp;&nbsp;Always-on flat&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a3', '&nbsp;&nbsp;Always-on consumo&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a4', '&nbsp;&nbsp;Sicurezza&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a5', '&nbsp;&nbsp;VoIP&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a6', '&nbsp;&nbsp;Wireless&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a7', '&nbsp;&nbsp;Interoperabilità&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.addTab('a8', '&nbsp;&nbsp;Variazioni&nbsp;&nbsp;', '*');
	tabbarVisualizzaContratto.setTabActive('a1');

	var layoutDatiAnagrafica = tabbarVisualizzaContratto.cells('a1').attachLayout('2U');
	var subLayout1 = dhxLayout.cells('a').attachLayout('3E');
	subLayout1.cells('a').setText('Dati anagrafici e Contratto');
	subLayout1.cells('b').setText('Date Contrattuali');
	subLayout1.cells('c').setText('Valori Economici Attualizzati');
	dhxLayout.cells('b').setText('Referenti');
	dhxLayout.cells('a').fixSize(true, true);
	subLayout1.cells('a').fixSize(true, true);
	subLayout1.cells('b').fixSize(true, true);

	var gridAOF = tabbarVisualizzaContratto.cells('a2').attachGrid();
	gridAOF.setSkin('modern');
	gridAOF.setImagePath('dhtmlxSuite/dhtmlxGrid/codebase/imgs/');
	gridAOF.setHeader('Cliente,Contratto,Data Contratto,Stato Contratto,BC Team,PM,idContratto');
	gridAOF.attachHeader('#text_filter,#text_filter,#text_filter,#select_filter,#select_filter,#select_filter,#select_filter');
	gridAOF.setColSorting('str,str,date,str,str,str,int');
	gridAOF.setInitWidths('340,310,120,192,222,93,0');
	gridAOF.setColTypes('ro,ro,dhxCalendar,ro,ro,ro,coro');
	gridAOF.setColAlign('left,left,center,center,center,center,center');
	gridAOF.enableRowsHover(true,'grid_hover');
	gridAOF.init();

	var datagrid = [['Cliente1,Contratto1,01/01/2010,Stato1,BC Team1,PM1,1'],['Cliente2,Contratto2,01/01/2010,Stato2,BC Team2,PM2,2']];
	gridAOF.parse(datagrid,'jsarray');

	gridAOF.attachEvent('onEditCell',function(stage,id,index) {
		if (index == 3) return false;
		return true; }
	);
	
	tabbarVisualizzaContratto.setContentHTML('a3', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
	tabbarVisualizzaContratto.setContentHTML('a4', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
	tabbarVisualizzaContratto.setContentHTML('a5', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
	tabbarVisualizzaContratto.setContentHTML('a6', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
	tabbarVisualizzaContratto.setContentHTML('a7', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
	tabbarVisualizzaContratto.setContentHTML('a8', '<div style="background-color: #ffff99; height: 100%">ciao</div>');
</script>

Please…help me!!!

[Alexandra]

but it doesn’t work as expected.

Please described what the issue is. The code looks correct

[Vale1976]

I’d like to make a Layout and a Grid as contents of two different tabbars…

However I’ve fixed the problem in another way