Tabbar and Grid with overflow: auto

Suite and Optimus Suite 5
#1

I have a list of tabs (Monday to Sunday).

I use a gridObject to attach to the same tab which works fine.

The issue I am finding that I need to fit the div size to the cell size of the tab as it will not display the scroll bars.

Is there an issue with this. I am using 4.11 Pro

#2

How do you attach grid? Via attchGrid method or you init grid in div and then attach itn to tab via attachObject method?

#3

Code Snippet

	tabbar.addTab('tbarMonday','Monday - '+formatDate(getMonday(new Date(), 0)) + "<img src='DaysOfWeek/daysofweek_mon.png' align='right' />");
	var tbarMonday = tabbar.cells('tbarMonday');
	tbarMonday.setActive();
	gdSchedule = new dhtmlXGridObject("schedule_grid");
	tbarMonday.attachObject("schedule_grid");
	gdSchedule.setIconsPath('./codebase/imgs/');

Then on each tab click I detach the previous and then attach object again to new tab.

To overcome the issue I use:

		div#schedule_grid {
			position: relative;
			width: 98%;
			height: 30%;
			overflow: auto;
		}

But when the users resizes the cell you can lose the scroll bars.

#4

To avoid your scroll issue you h=need to use the next approach:
var tbarMonday = tabbar.cells(‘tbarMonday’);

tbarMonday.setActive(); gdSchedule = tbarMonday.attachGrid();

#5

How do I attach the same grid to each tab when clicked using the attachGrid() method.

The data displayed in the grid is for each day of the week depending on which tab is selected.

example

Monday Tab = select * from tblDaysofWeek where day = ‘Monday’
Tuesday Tab = select * from tblDaysofWeek where day = ‘Tuesday’

If Tuedays tab is selected at the moment I unattach Monday and attach tuesday to the same grid filled with different data using clearAndLoad method.

#6

To help you i need to ask just one more question: do you filt your grid data depending on the day?
You need to load just ONE grid to show it all the time and filt data depending on selected tab? Am i right?

#7

That is correct.

I fill the grid with the days data from a table.

<?php
require_once("../codebase/php_connector/grid_connector.php");// includes the appropriate connector 
require_once("config.php"); // includes the appropriate config 
 
$dbConn=mysql_connect(DBHOST,DBUSERNAME,DBPASSWORD);//connects to server containing the desired DB
mysql_select_db(DBNAME);           

$Grid = new GridConnector($dbConn,"MySQL");                    // connector initialization

$sql = "select w.*, s.latitude as LAT, s.longitude as LNG  from tblweeklyschedule w, tblSites s where s.csc = w.csc and w.FORECAST_DATE = '".$_GET['d']."'";

$Grid->render_sql($sql,"ID","CSC,LAT,LNG,SITE_NAME,FORECAST_DATE,ACTIVITY_TYPE,SITE_TYPE,BSC_ID,WP_ID,WP_NAME,WP_NOTES,RIGGING_WI_NOTES,
  ENGINEER1,ENGINEER2,ENGINEER3,DRIVER,COMPANY,PROJ_REG,PROJ_ZONE,NSN_REGION,DEF_COUNT,OPEN_DEF,
  ADDRESS,POST_CODE,DIRECTIONS,SITENET,HAZARDS,PERMIT_2G,PERMIT_3G,PERM_DATE_REQ,PERMIT_APPROVAL,
  ACCESS_DETAILS,ACCESS_CONFIRMED,ACCESS_CONFIRMED_DETAILS,SOG,SPD,CP,CAB_TO_CUT,CRANE_REQ,
  MAT_SUB,PIV_DATE,TMPM,LADDER,SITE_TYPE2,MAST_TYPE,HIAB_PLAN,CP_PLAN,RAMS_LOADED");// data configuration  

?>

The table holds a weekly schedule of jobs and by clicking a tab to reload the data based on the date for that day.

Thanks for your time and help.

#8

Please, try the next code sample:

[code]

DHTMLX test html,body { width: 100%; height: 100%; margin: 0; } 
	<script>
		gridData={
			rows:[
				{ id:1001,
					data:[
						"100",
						"A Time to Kill",
						"John Grisham"] },
				{ id:1002,
					data:[
						"1000",
						"Blood and Smoke",
						"Stephen King"] },
				{ id:1003,
					data:[
						"-200",
						"The Rainmaker",
						"John Grisham"] },
				{ id:1004,
					data:[
						"350",
						"The Green Mile",
						"Stephen King"] },
				{ id:1005,
					data:[
						"700",
						"Misery",
						"Stephen King"] },
				{ id:1006,
					data:[
						"-1200",
						"The Dark Half",
						"Stephen King"] },
				{ id:1007,
					data:[
						"1500",
						"The Partner",
						"John Grisham"] },
				{ id:1008,
					data:[
						"500",
						"It",
						"Stephen King"] }
			]};
	var tabbar, grid;
	function doOnLoad(){
		tabbar = new dhtmlXTabBar("tabbar_top", "top");
		tabbar.addTab("sk","Stephen King","180px");
		tabbar.addTab("jg","John Grisham","180px");
		tabbar.enableContentZone(false);

// tabbar.tabs(“sk”).setActive();

		mygrid = new dhtmlXGridObject('gridcontainer');
		mygrid.setImagePath("../dhtmlxSuite_v41_pro/codebase/imgs/");
		mygrid.setHeader("Sales, Book Title, Author");
		mygrid.setInitWidths("70,250,*");
		mygrid.setColAlign("right,left,left");
		mygrid.setColTypes("dyn,ed,ed");
		mygrid.setColSorting("int,str,str");
		mygrid.init();
		mygrid.parse(gridData,"json");

		tabbar.attachEvent("onSelect",function(id){
			if(id=="sk"){mygrid.filterBy(2,"Stephen King");}
			if(id=="jg"){mygrid.filterBy(2,"John Grisham");}
			return true;
		});
	}
	</script>
</head>
<body onload="doOnLoad()">
	<div id="tabbar_top" style=" height: 28px; position: relative;"></div>
	<div id="m_zone" style=" height: 500px; overflow: hidden; position: relative; border-left: 1px solid #a4bed4; border-right: 1px solid #a4bed4;">
		<div id="gridcontainer" style="height: 480px"></div>
	</div>
</body>
[/code]