[ 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: dataprepared_without_pagination.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=" 'dataPrepared' configuration option helps to speed up loading of extremly large grids. When the 'dataPrepared' option is used, the Grid doesn't do any data conversion at all during initialization. This greatly speeds up loading, but you are responsible to provide correctly prepared data to the Grid because it doesn't do any checking as well. 'visibleRows' configuration option helps to speed up rendering of extremly large grids. ">
	<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 Extremely Large Grid</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" />


	<!-- Include Zapatec Slider -->
	<script type="text/javascript" src="../../zpslider/src/slider.js"></script>

	<!-- Custom style -->
	<style type="text/css">
		#gridContainer img {
			width: 60px;
			height: 60px;
		}
	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Zapatec Extremely Large Grid</div>

This example demonstrates use of "dataPrepared" configuration option.

		<div class='zpCalDemoText'>
		<ul>
		
		
<li>"dataPrepared" configuration option helps to speed up loading of extremly
 large grids.</li>
<li>When the "dataPrepared" option is used, the Grid doesn't do any data
 conversion at all during initialization. This greatly speeds up loading, but
 you are responsible to provide correctly prepared data to the Grid because it
 doesn't do any checking as well.</li>
<li>"visibleRows" configuration option helps to speed up rendering of extremly
 large grids.</li>

		</ul>
		</div>



<div class="mainCol">
	<div style="height: 570px; position: relative">
		<div style="width: 550px; height: 570px; overflow-x: auto; overflow-y: hidden; position: absolute">
			<table>
				<tr>
					<td style="vertical-align: top"><div id="gridContainer"></div></td>
					<td style="vertical-align: top"><div id="gridPaginationSlider"></div></td>
				</tr>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">

	/*
	 * Initialize grid
	 */
	var objGrid = new Zapatec.Grid({

		// Use external data source
		source: 'dataprepared.txt',
		sourceType: 'json/url',

		// Data prepared in grid internal format
		dataPrepared: true,

		// Use "lightblue" theme
		theme: 'lightblue',

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

		// 8 rows are visible
		visibleRows: 8,

		// Event listeners
		eventListeners: {
			'gridInitialized': drawVerticalScrollbar,
			'gridModified': drawVerticalScrollbar
		}

	});

	/*
	 * Vertical scrollbar.
	 */
	var oVerticalScrollbar;

	/*
	 * Draws vertical scrollbar.
	 */
	function drawVerticalScrollbar() {
		// Get range
		var iRange = this.recordsDisplayed() - 1;
		// Reset slider
		if (oVerticalScrollbar) {
			oVerticalScrollbar.setPos(0);
			oVerticalScrollbar.setRange(0, iRange);
		} else {
			// Initialize slider
			var oGrid = this;
			oVerticalScrollbar = new Zapatec.Slider({
				div: 'gridPaginationSlider',
				length: 450,
				orientation: 'V',
				step: 1,
				range: [0, iRange],
				onChange: function(iValue) {
					oGrid.gotoVerticalOffset(Math.ceil(iValue));
				}
			});
		}
	};

</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>