[ 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: compare.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=" This demo shows custom Grid output feature, horizontal Grid feature and ability to compare Grid rows. Check two or more 'Compare' checkboxes and click 'Compare' button. Compared rows are shown in horizontal Grid inside the Window. With custom Grid output you still can use most Grid functionality because Grid provides static methods like Zapatec.Grid.sort, Zapatec.Grid.rowOnClick, Zapatec.Grid.gotoPage, Zapatec.Grid.checkboxOnClick, etc. that can be written directly into onclick attribute of an HTML element while forming Grid output. You can use standard pagination together with custom Grid output. You can specify custom styles for certain rows and cells in the Grid. In this example best sellers are marked with yellow. ">
	<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 - Compare Rows</title>

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

	<!-- Custom includes -->	
	<!-- Include Zapatec Grid Widget -->
	<script type="text/javascript" src="../src/zpgrid.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 Window Widget -->
	<script type="text/javascript" src="../../zpwin/src/window.js"></script>

	<style type="text/css">

		#gridPagination, #gridPagination2 {
			margin: 7px 0px;
		}

		.myHeader {
			border-top: 1px solid #630000;
			border-bottom: 1px solid #630000;
			background: #ededed;
			color: #630000;
			font: bold 13px Arial, sans-serif;
		}

		#gridHeader, #gridHeader2 {
			width: 415px;
			text-align: center;
		}

		.myHeader form {
			margin: 3px 0px;
		}

		.myHeader input {
			background: #c00;
			color: #fff;
			font: bold 11px Arial, sans-serif;
		}

		.myField {
			color: #666;
			cursor: pointer;
		}

		.myFieldSortedAsc {
			padding-right: 16px;
			background: url('img/down.gif') no-repeat right center;
			color: #006;
		}

		.myFieldSortedDesc {
			padding-right: 16px;
			background: url('img/up.gif') no-repeat right center;
			color: #006;
		}

		.myFieldActive {
			color: #c00;
		}

		.myRow {
			padding: 7px 0px;
			border-bottom: 1px solid #ccc;
		}

		.myCol1 {
			width: 80px;
		}

		.myCol2 {
			width: 250px;
			font: 13px Arial, sans-serif;
		}

		.myCol2 div {
			font: 11px Arial, sans-serif;
		}

		.myCol3 {
			width: 80px;
			font: bold 16px Arial, sans-serif;
			text-align: center;
		}

		.myCol4 {
			width: 70px;
			font: 11px Arial, sans-serif;
			text-align: center;
		}

		/* Set fixed width for all columns in comapare grid */
		#gridCompareContainer .zpGridCell .zpGridDiv {
			width: 100px !important;
		}

		/* Custon style for dialog window */
		.zpWinTitleText {
			color: #fff;
			font: bold 16px Verdana, Arial, sans-serif;
		}

	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Compare Rows</div>

<div class='mainCol'>

		<div class='zpCalDemoText'>
		<ul>
		
		
		<li>This demo shows custom Grid output feature, horizontal Grid feature and
		 ability to compare Grid rows.</li>
		<li>Check two or more "Compare" checkboxes and click "Compare" button.</li>
		<li>Compared rows are shown in horizontal Grid inside the Window.</li>
		<li>With custom Grid output you still can use most Grid functionality
		 because Grid provides static methods like Zapatec.Grid.sort,
		 Zapatec.Grid.rowOnClick, Zapatec.Grid.gotoPage,
		 Zapatec.Grid.checkboxOnClick, etc. that can be written directly into
		 onclick attribute of an HTML element while forming Grid output.</li>
		<li>You can use standard pagination together with custom Grid output.</li>
		<li>You can specify custom styles for certain rows and cells in the Grid.
		 In this example best sellers are marked with yellow.</li>

		</ul>
		</div>



	<!-- Compare window content -->
	<div id="windowCompareContent" style="display: none">
		<!-- Compare grid container -->
		<div id="gridCompareHeaderContainer"></div>
		<div id="gridCompareContainer"></div>
	</div>

	<!-- Main grid -->
	<div id="gridPagination"></div>
	<div class="myHeader">
		<table>
			<tr>
				<td>
					<div id="gridHeader"></div>
				</td>
				<td>
					<div>
						<form>
							<input type="button" value="Compare" onclick="compareRows()" />
						</form>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="gridContainer"></div>
	<div class="myHeader">
		<table>
			<tr>
				<td>
					<div id="gridHeader2"></div>
				</td>
				<td>
					<div>
						<form>
							<input type="button" value="Compare" onclick="compareRows()" />
						</form>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="gridPagination2"></div>

</div>

<script type="text/javascript">

	/*
	 * Reference to the main grid header container element
	 */
	var oGridHeaderContainer = document.getElementById('gridHeader');

	/*
	 * Reference to the main grid second header container element
	 */
	var oGridHeaderContainer2 = document.getElementById('gridHeader2');

	/*
	 * Reference to the main grid data container element
	 */
	var oGridContainer = document.getElementById('gridContainer');

	/*
	 * Hold checked rows.
	 */
	var oCheckedRows = {};

	/*
	 * Gets called from drawMainGridHeader to draw field.
	 */
	function drawMainGridField(aHtml, oGrid, oField, sTitle, sSeparator) {
		// Form field class attribute
		var aCl = [];
		aCl.push('myField');
		if (!oField.nosort) {
			if (oField.sorted) {
				aCl.push(' myFieldSortedAsc');
			} else if (oField.sortedDesc) {
				aCl.push(' myFieldSortedDesc');
			}
		}
		var sClass = aCl.join('');
		// Form class attribute when field is active
		aCl.push(' myFieldActive');
		var sClassActive = aCl.join('');
		// Form HTML
		aHtml.push('<span class="');
		aHtml.push(sClass);
		aHtml.push('" onmouseover="this.className=\'');
		aHtml.push(sClassActive);
		aHtml.push('\'" onmouseout="this.className=\'');
		aHtml.push(sClass);
		// Apply custom style taken from data source
		aHtml.push('\'" style="');
		aHtml.push(oGrid.getFieldStyle(oField));
		// Use standard onclick handler
		aHtml.push('" onclick="');
		aHtml.push(oGrid.getFieldOnclick(oField));
		aHtml.push('">');
		aHtml.push(sTitle);
		aHtml.push('</span>');
		aHtml.push(sSeparator);
	}

	/*
	 * Gets called by the main grid to display headers.
	 */
	function drawMainGridHeader(oGrid) {
		// Get fields
		var aFields = oGrid.getFields();
		// Form HTML
		var aHtml = [];
		aHtml.push('<div>Sort by: ');
		drawMainGridField(aHtml, oGrid, aFields[2], 'Price', ' | ');
		drawMainGridField(aHtml, oGrid, aFields[0], 'Product Name', ' | ');
		drawMainGridField(aHtml, oGrid, aFields[5], 'Brand');
		aHtml.push('</div>');
		// Output header
		var sHtml = aHtml.join('');
		oGridHeaderContainer.innerHTML = sHtml;
		oGridHeaderContainer2.innerHTML = sHtml;
		// Remove data
		oGridContainer.innerHTML = '';
	};

	/*
	 * Gets called by the grid to display rows.
	 */
	function drawMainGridRow(oGrid, oRow) {
		// Get row id
		var iRowId = oGrid.getRowId(oRow);
		// Get cells
		var aCells = oGrid.getRowCells(oRow);
		// Form HTML
		var aHtml = [];
		aHtml.push('<div class="myRow" style="');
		aHtml.push(oGrid.getRowStyle(oRow));
		aHtml.push('"><table><tr><td><div class="myCol1">');
		// Image
		aHtml.push(oGrid.getCellValueString(aCells[1]));
		aHtml.push('</div></td><td><div class="myCol2">');
		// Title
		aHtml.push(oGrid.getCellValueString(aCells[0]));
		aHtml.push('<div> - Product Number: ');
		// Product number
		aHtml.push(oGrid.getCellValueString(aCells[3]));
		aHtml.push('</div><div> - Mfr. Part #: ');
		// Part number
		aHtml.push(oGrid.getCellValueString(aCells[4]));
		aHtml.push('</div><div> - Brand: ');
		// Brand
		aHtml.push(oGrid.getCellValueString(aCells[5]));
		aHtml.push('</div></div></td><td><div class="myCol3">');
		// Price
		aHtml.push(oGrid.getCellValueString(aCells[2]));
		// Checkbox
		aHtml.push('</div></td><td><div class="myCol4">Compare<br/>&raquo;<input\
		 type="checkbox" onclick="onMainGridCheckboxClick(this,');
		aHtml.push(iRowId);
		aHtml.push(')"');
		if (oGrid.getRowSelected(oRow)) {
			aHtml.push(' checked');
		}
		aHtml.push('/>&laquo;</div></td></tr></table></div>');
		// Output row
		oGridContainer.innerHTML += aHtml.join('');
	};

	/*
	 * Handles click on checkbox inside the main grid.
	 */
	function onMainGridCheckboxClick(oCheckbox, iRowId) {
		// Get row object
		var oRow = oGrid.getRowById(iRowId);
		// Select / unselect depending on checkbox state
		if (oCheckbox.checked) {
			oGrid.selectRow(oRow);
		} else {
			oGrid.unselectRow(oRow);
		}
	}

	/*
	 * Shows compare window.
	 */
	function showWindowCompare() {
		// Make sure compare grid is not empty and window was initialized
		if (this.getRows().length && oWin) {

			// Show window
			oWin.show();

			// Restore if it is minimized
			oWin.restore();

			// Show window content because initially it is hidden
			document.getElementById('windowCompareContent').style.display = '';

		}
	}

	/*
	 * Adjusts dimensions of compare grid.
	 */
	function adjustGridCompare() {

		// Get window content
		var oContent = document.getElementById('windowCompareContent');
		if (!oContent) {
			return;
		}

		// Get window container
		var oContainer = oContent.parentNode;
		if (!oContainer) {
			return;
		}

		// Get grid header container
		var oGridHeader = document.getElementById('gridCompareHeaderContainer');
		if (!oGridHeader) {
			return;
		}

		// Get grid data container
		var oGridData = document.getElementById('gridCompareContainer');
		if (!oGridData) {
			return;
		}

		// Turn off scroll bars in the window since grid should fit into it
		oContainer.style.overflow = 'hidden';

		// Get window inner dimensions
		var oOffset = Zapatec.Utils.getElementOffset(oContainer);

		// Calculate data container dimensions
		var iHeight = oOffset.height - oGridHeader.offsetHeight;
		var iWidth = oOffset.width;

		// Adjust dimensions of grid containers to fit into window
		oGridData.style.height = iHeight + 'px';
		oGridData.style.width = iWidth + 'px';
		oGridHeader.style.width = oGridData.clientWidth + 'px';

		// Get dimensions of the grid
		var oDims = oGridCompare.getGridDimensions();

		// Determine if we need scroll bars and draw them
		if (oDims.width && oDims.height) {
			oGridData.style.overflow = 'scroll';
			if (oDims.width < iWidth) {
				oGridData.style.overflowX = 'hidden';
			} else {
				oGridData.style.overflowX = 'scroll';
			}
			if (oDims.height < iHeight) {
				oGridData.style.overflowY = 'hidden';
			} else {
				oGridData.style.overflowY = 'scroll';
			}
		} else {
			oGridData.style.overflow = 'scroll';
			oGridData.style.overflowX = 'scroll';
			oGridData.style.overflowY = 'scroll';
		}

	}

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

		// Use JavaScript object as grid data source, initially grid doesn't have
		// rows
		source: {
			fields: [
				{title: 'Name'},
				{title: 'Image'},
				{title: 'Price', dataType: 'float'},
				{title: 'Product Number'},
				{title: 'Mfr. Part #'},
				{title: 'Mfg. Name'},
				{title: 'Platform'},
				{title: 'Display Type'},
				{title: 'Viewable Size', dataType: 'float'},
				{title: 'Display Resolution'},
				{title: 'Response Time', dataType: 'int'},
				{title: 'Brightness', dataType: 'int'},
				{title: 'Contrast Ratio'},
				{title: 'Video Interface Type'},
				{title: 'Horizontal Viewing Angle (Degrees)', dataType: 'int'},
				{title: 'Vertical Viewing Angle (Degrees)', dataType: 'int'},
				{title: 'Port Connectors'},
				{title: 'Height', dataType: 'float'},
				{title: 'Width', dataType: 'float'},
				{title: 'Depth', dataType: 'float'},
				{title: 'Weight', dataType: 'float'}
			]
		},
		sourceType: 'json',

		// Use horizontal layout
		horizontal: true,

		// Mark first row
		fixedLeft: 1,

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

		// Put grid header into separate div
		headerContainer: 'gridCompareHeaderContainer',

		// Put grid data into separate div
		container: 'gridCompareContainer',

		// Do not mark selected cells with different color
		selectCells: false,

		// Do not mark selected rows with different color
		selectRows: false,

		// Do not mark active cells with different color
		activeCells: false,

		// Do not mark active rows with different color
		activeRows: false,

		// Set up events for grid adjustment
		eventListeners: {
			gridPrepareRefresh: showWindowCompare,
			gridRefreshed: adjustGridCompare
		}

	});

	/*
	 * Initialize compare window
	 */
	var oWin = Zapatec.Window.setup({

		// Window dimensions and position
		width: 470, 
		height: 470,
		left: 200,
		top: 100,

		// Take window content from the element with id "windowCompareContent"
		divContent: 'windowCompareContent',

		// Window title
		title: 'Compare Selected Rows',

		// Initially hide
		initialState: 'hidden',

		// Do not destroy window on close
		hideOnClose: true,

		// Will be always visible
		fixed: true,

		// Set up events for grid adjustment
		eventListeners: {
			onMaximize: adjustGridCompare,
			onRestore: adjustGridCompare,
			onResizeEnd: adjustGridCompare
		}

	});

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

		// Theme is needed for pagination
		theme: 'winxp',

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

		// Use drawMainGridHeader function to display grid header
		callbackHeaderDisplay: drawMainGridHeader,

		// Use drawMainGridRow function to display grid row
		callbackRowDisplay: drawMainGridRow,

		// Use standard pagination together with custom grid output
		// Put pagination into div with id "gridPagination" and duplicate in
		// div div with id "gridPagination2"
		paginationContainer: ['gridPagination', 'gridPagination2'],

		// Display 10 rows per page
		rowsPerPage: 10,

		// Do not mark selected cells with different color
		selectCells: false,
		
		// Initially sort by price
		sortColumn: 2

	});

	/*
	 * Compares rows selected in the main grid. Shows selected rows in the compare
	 * grid placed into Zapatec Window.
	 */
	function compareRows() {
		// Populate compare grid with data from main grid
		oGrid.editSelectedRows(oGridCompare);
	}

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