[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: autoresize-pane.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" Try to drag pane delimiters. Number of rows per page in the grid is adjusted automatically depending on the pane size. Grid may consist of one or multiple containers. Grid may have fixed columns, totals and other features. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Grid Widget - Zapatec AJAX Grid - Dynamic Grid Adjustment To Parent Pane Example</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zpgrid.js"></script>
	<script type="text/javascript" src="demo.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	<link href="../themes/layout.css" rel="stylesheet" type="text/css" />


	<script type="text/javascript" src="../../zppaneset/src/paneset.js"></script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Zapatec AJAX Grid - Dynamic Grid Adjustment To Parent Pane Example</div>

This example shows how to adjust grid dynamically depending on container pane
size.

		<div class='zpCalDemoText'>
		<ul>
		
		
<li>Try to drag pane delimiters.</li>
<li>Number of rows per page in the grid is adjusted automatically depending on
 the pane size.</li>
<li>Grid may consist of one or multiple containers.</li>
<li>Grid may have fixed columns, totals and other features.</li>

		</ul>
		</div>



<div class="mainCol">
	<div id="panes">
		<div id="paneset" class="zpPaneSetMarker">
			<div id="paneLeft" class="zpPaneMarker" style="float: left; width: 100px">
				Left Pane
			</div>
			<div id="panesetMiddle" class="zpPaneSetMarker" style="float: left; width: 500px">
				<div id="paneTop" class="zpPaneMarker" style="height: 100px">
					Top Pane
				</div>
				<div id="paneCenter" class="zpPaneMarker" style="height: 200px">
					<div id="gridBorder">
						<div id="gridHeaderContainer"></div>
						<div id="gridDataContainer"></div>
						<div id="gridPaginationContainer"></div>
					</div>
				</div>
				<div id="paneBottom" class="zpPaneMarker" style="height: 100px">
					Bottom Pane
				</div>
			</div>
			<div id="paneRight" class="zpPaneMarker" style="float: left; width: 100px">
				Right Pane
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	/*
	 * Check external components
	 */
	if (typeof Zapatec.PaneSet == 'undefined') {
		alert('This demo shows interaction between different Zapatec components. It works only if Zapatec PaneSet component was purchased.');
	}

	/*
	 * Define global variables that are referenced in the following functions
	 */
	var oPaneset;
	var oGrid;

	/*
	 * Adjusts grid.
	 */
	function adjustGrid() {
		oGrid.autoresize();
	}

	/*
	 * Sets up events for grid adjustment.
	 */
	function setupGridAdjustment() {

		// We don't need this listener any more
		this.removeEventListener('gridRefreshed', setupGridAdjustment);

		// Set up paneset events
		oPaneset.addEventListener('paneLengthChanged', adjustGrid);

	}

	/*
	 * Initializes grid.
	 * Called only once after the window is initialized.
	 */
	function initializeGrid(sPaneId) {

		// Initialize grid once the pane is ready
		if (sPaneId != 'paneCenter') {
			return;
		}

		// We don't need this listener any more
		this.removeEventListener('paneInitialized', initializeGrid);

		// Initialize grid
		oGrid = new Zapatec.Grid({

			// Use json_phone.txt file as grid data source
			source: 'json_phone.txt',
			sourceType: 'json/url',

			// Put grid into element with id "gridDataContainer"
			container: 'gridDataContainer',

			// Put grid header into element with id "gridHeaderContainer"
			headerContainer: 'gridHeaderContainer',

			// Put grid pagination into element with id "gridPaginationContainer"
			paginationContainer: 'gridPaginationContainer',

			// Use "winxp" theme
			theme: "winxp",

			// Display 10 rows per page
			rowsPerPage: 10,

			// Fix first column
			fixedLeft: 1,

			// Initially sort by first column
			sortColumn: 0,

			// Totals definition
			totals: [
				{
					column: [5, 6],
					callback: Zapatec.Grid.sum,
					labelColumn: 0
				},
				{
					column: [5, 6],
					callback: Zapatec.Grid.avg,
					labelColumn: 0
				}
			],

			// Adjust grid dynamically to the window size
			fitIntoParent: true,

			// Set up events for grid adjustment
			eventListeners: {
				gridRefreshed: setupGridAdjustment
			}

		});

	}

	/*
	 * Initialize paneset
	 */
	var oPaneset = Zapatec.PaneSet.setup({
		parent : "panes",
		panes : "paneset",
		reuseContainer : "paneset",
		resizable : true,
		dataType : "html",
		eventListeners: {
			paneInitialized: initializeGrid
		}
	});

</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>