[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/14082024/Data/htdocs/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: toolbar.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="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 - Grid With Toolbar Example</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 Menu Widget -->
	<script type="text/javascript" src="../../zpmenu/src/zpmenu.js"></script>

	<!-- Include Zapatec Window Widget -->
	<script type="text/javascript" src="../../zpwin/src/window.js"></script>

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

	<!-- Include Zapatec Grid Toolbar Widget extension -->
	<script type="text/javascript" src="../src/zpgrid-toolbar.js"></script>

	<style type="text/css">

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

		.zpWinContent {
			color: ButtonText;
			background: ButtonFace;
		}

		/* Custon style for dialog form */
		.zpGridToolbarDialog {
			padding: 8px 2px;
		}

		.zpGridToolbarDialog form {
			margin: 0px;
		}

		.zpGridToolbarDialog fieldset {
			padding: 0px;
			border-right: 0px;
			border-bottom: 0px;
			border-left: 0px;
		}

		.zpGridToolbarDialog,
		.zpGridToolbarDialog legend,
		.zpGridToolbarDialog label
		{
			font: 11px Tahoma, Arial, sans-serif;
		}

		.zpGridToolbarDialog td {
			vertical-align: top;
			padding: 2px 8px;
			white-space: nowrap;
		}

		.zpGridToolbarDialog select {
			width: 140px;
		}

		.zpGridToolbarDialog .zpGridToolbarDialogButtons {
			padding: 10px 2px 0px 0px;
			text-align: right;
		}

		.zpGridToolbarDialog .zpGridToolbarDialogButtons input {
			width: 80px;
		}

	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Grid With Toolbar Example</div>


	<div class="mainCol">
		<div>
			This is an example of toolbar for the Grid.
		</div>
		<ul>
			<li>Toolbar is made with Zapatec Menu. It can be placed anywhere on the
			 page. Toolbar is resized automatically when width of the Grid
			 changes.</li>
			<li>Dialog windows are made with Zapatec Window.</li>
			<li>Choose <b>Sort</b> to sort the Grid by several columns.</li>
			<li>Choose <b>Row</b> to go to certain row.</li>
			<li>Choose <b>Column</b> to filter or search the Grid.</li>
			<li>Click <b>Unsort</b> to unsort the Grid.</li>
			<li>Click <b>Reset</b> to reset all filters.</li>
		</ul>

		<!-- Container for grid and its toolbar -->
		<table style="border-collapse: separate; border-spacing: 0px"
		 cellpadding="0" cellspacing="0">
			<tr>
				<td id="menuContainer"></td>
			</tr>
			<tr>
				<td id="gridContainer"></td>
			</tr>
		</table>

	</div>

	<!-- Hidden auxiliary HTML -->
	<div style="display: none">

		<!-- Menu source -->
		<ul id="menuSource" style="display: none">
			<li>
				<a href="javascript:oGrid.showDialogSort()">Sort</a>
			</li>
			<li>
				Row
				<ul>
					<li>
						<a href="javascript:oGrid.goToFirstRow()">Go to First</a>
					</li>
					<li>
						<a href="javascript:oGrid.goToLastRow()">Go to Last</a>
					</li>
					<li>
						<a href="javascript:oGrid.showDialogGoToRow()">Go to Row</a>
					</li>
				</ul>
			</li>
			<li>
				Column
				<ul>
					<li>
						<a href="javascript:oGrid.showDialogSearch()">Search</a>
					</li>
					<li>
						Range
						<ul id="rangeUl">
						</ul>
					</li>
					<li>
						Filter Out
						<ul id="filterOutUl">
						</ul>
					</li>
					<li>
						<a href="javascript:oGrid.showDialogShow()">Show</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="javascript:oGrid.unsort()">Unsort</a>
			</li>
			<li>
				<a href="javascript:oGrid.resetControls()">Reset</a>
			</li>
		</ul>

		<!-- Sort dialog content -->
		<div id="dialogSort" class="zpGridToolbarDialog">
			<form onsubmit="return false">
				<fieldset><legend>Sort by</legend>
					<table>
						<tr>
							<td>
								<select id="dialogSortColumn1"></select>
							</td>
							<td>
								<input type="radio" name="dialogSortColumn1Order"
								 id="dialogSortColumn1Asc" checked="checked"/>
								<label for="dialogSortColumn1Asc">Ascending</label><br/>
								<input type="radio" name="dialogSortColumn1Order"
								 id="dialogSortColumn1Desc"/>
								<label for="dialogSortColumn1Desc">Descending</label>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset><legend>Then by</legend>
					<table>
						<tr>
							<td>
								<select id="dialogSortColumn2"></select>
							</td>
							<td>
								<input type="radio" name="dialogSortColumn2Order"
								 id="dialogSortColumn2Asc" checked="checked"/>
								<label for="dialogSortColumn2Asc">Ascending</label><br/>
								<input type="radio" name="dialogSortColumn2Order"
								 id="dialogSortColumn2Desc"/>
								<label for="dialogSortColumn2Desc">Descending</label>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset><legend>Then by</legend>
					<table>
						<tr>
							<td>
								<select id="dialogSortColumn3"></select>
							</td>
							<td>
								<input type="radio" name="dialogSortColumn3Order"
								 id="dialogSortColumn3Asc" checked="checked"/>
								<label for="dialogSortColumn3Asc">Ascending</label><br/>
								<input type="radio" name="dialogSortColumn3Order"
								 id="dialogSortColumn3Desc"/>
								<label for="dialogSortColumn3Desc">Descending</label>
							</td>
						</tr>
					</table>
				</fieldset>
				<div class="zpGridToolbarDialogButtons">
					<input type="button" value="OK"
					 onclick="oGrid.multiSort()"/>
					<input type="button" value="Cancel"
					 onclick="oGrid.hideDialogSort()"/>
				</div>
			</form>
		</div>

		<!-- Go To Row dialog content -->
		<div id="dialogGoToRow" class="zpGridToolbarDialog">
			<form onsubmit="return false">
				Go to row: <input type="text" id="inputGoToRow" style="width: 100px"/>
				<div class="zpGridToolbarDialogButtons">
					<input type="button" value="OK"
					 onclick="oGrid.goToRowNumber(document.getElementById('inputGoToRow').value)"/>
					<input type="button" value="Cancel"
					 onclick="oGrid.hideDialogGoToRow()"/>
				</div>
			</form>
		</div>

		<!-- Search dialog content -->
		<div id="dialogSearch" class="zpGridToolbarDialog">
			<form onsubmit="return false">
				Search: <input type="text" id="inputSearch" style="width: 100px"/><br/>
				<input type="checkbox" id="useRegExp"/>
				<label for="useRegExp">Use regular expressions</label>
				<div id="dialogSearchCheckboxes"></div>
				<div class="zpGridToolbarDialogButtons">
					<input type="button" value="OK"
					 onclick="oGrid.searchColumns(document.getElementById('inputSearch').value,
						document.getElementById('useRegExp').checked)"/>
					<input type="button" value="Cancel"
					 onclick="oGrid.hideDialogSearch()"/>
				</div>
			</form>
		</div>

		<!-- Range dialogs will be formed and placed here -->
		<div id="dialogRange"></div>

		<!-- Filter Out dialogs will be formed and placed here -->
		<div id="dialogFilterOut"></div>

		<!-- Show dialog content -->
		<div id="dialogShow" class="zpGridToolbarDialog">
			<form onsubmit="return false">
				<div id="dialogShowCheckboxes"></div>
				<div class="zpGridToolbarDialogButtons">
					<input type="button" value="OK"
					 onclick="oGrid.showHideColumns()"/>
					<input type="button" value="Cancel"
					 onclick="oGrid.hideDialogShow()"/>
				</div>
			</form>
		</div>

	</div>

	<script type="text/javascript">

		/*
		 * Check external components
		 */
		if (typeof Zapatec.Menu == 'undefined' || typeof Zapatec.Window == 'undefined') {
			alert('This demo shows interaction between different Zapatec components. It works only if Zapatec Menu and Zapatec Window components were purchased.');
		}

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

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

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

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

			// Display 10 rows per page
			rowsPerPage: 10,

			// Initially sort by Country
			sortColumn: 0,

			// Use element with id 'menuSource' as menu source
			menuSource: 'menuSource',
			menuSourceType: 'html',

			// Put menu into element with id "menuContainer"
			menuContainer: 'menuContainer',

			// Use "winxp1" theme for menu
			menuTheme: 'winxp1',

			// Put li elements for "Range" sub-menu into ul element with id "rangeUl"
			menuRangeUl: 'rangeUl',

			// Put li elements for "Filter Out" sub-menu into ul element with id
			// "filterOutUl"
			menuFilterOutUl: 'filterOutUl',

			// Get content for dialog "Sort" from div element with id "dialogSort"
			dialogSort: 'dialogSort',

			// Get content for dialog "Go to Row" from div element with id
			// "dialogGoToRow"
			dialogGoToRow: 'dialogGoToRow',

			// Get content for dialog "Search" from div element with id "dialogSearch"
			dialogSearch: 'dialogSearch',

			// Put "Range" dialogs into div element with id "dialogRange"
			dialogRange: 'dialogRange',

			// Put "Filter Out" dialogs into div element with id "dialogFilterOut"
			dialogFilterOut: 'dialogFilterOut',

			// Get content for dialog "Show" from div element with id "dialogShow"
			dialogShow: 'dialogShow'

		});

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