[ 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: context_menu.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 Context Menu 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>


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


	<div class="mainCol">
		<div>
			This is an example of context menu for the Grid.
		</div>
		<ul>
			<li>Context menu is done with Zapatec Menu.</li>
			<li>You can choose trigger event. See Zapatec Menu Widget documentation
			 for details.</li>
			<li>Click with right mouse button on any cell in the grid to open context
			 menu.</li>
			<li>Click with left mouse button in Opera because on right mouse click it
			 opens browser context menu, which can't be turned off from
			 JavaScript.</li>
			<li>Use Alt + left mouse click in Safari because it ignores right mouse
			 click.</li>
		</ul>

		<!-- Container for the grid -->
		<div id="gridContainer"></div>

		<!-- Source for the menu -->
		<ul id="contextMenu" style="display: none">
			<li><a href="javascript:editRow()">Edit row</a></li>
			<li><a href="javascript:deleteRow()">Delete row</a></li>
		</ul>

	</div>

	<script type="text/javascript">

		/*
		 * "Edit row" menu item handler.
		 */
		function editRow() {

			// Get row id
			var iRowId = oMenu.triggerArgs;

			// Get item number
			var sItem = oGrid.getCellValueString(oGrid.getCellById(iRowId, 0));
			alert('You are about to edit Item #' + sItem);

		}

		/*
		 * "Delete row" menu item handler.
		 */
		function deleteRow() {

			// Get row id
			var iRowId = oMenu.triggerArgs;

			// Get item number
			var sItem = oGrid.getCellValueString(oGrid.getCellById(iRowId, 0));
			alert('You are about to delete Item #' + sItem);

		}

		/*
		 * Initialize context menu
		 */
		var oMenu = new Zapatec.Menu({

			// Use ul with id "contextMenu" as menu data source
			source: 'contextMenu',
			sourceType: 'html',

			// Load theme from the specified path
			theme: '../../zpmenu/themes/office_blue.css',

			// Vertical menu
			vertical: true,

			// Menu will appear when right mouse button is clicked
			triggerEvent: 'mouseup',

			// Triggers will be added later in onGridRefresh function
			triggerObject: []

		});

		/*
		 * Gets called when grid is refreshed. Called in scope of the grid object.
		 */
		function onGridRefresh() {

			// Get visible rows
			var aRows = this.applyPaging();

			// Get grid id
			var iGridId = this.getId();

			// Form trigger initialization object
			var oTriggerObject = [];
			for (var iRow = 0; iRow < aRows.length; iRow++) {

				// Get row id
				var iRowId = this.getRowId(aRows[iRow]);

				// Add trigger
				oTriggerObject.push({

					// Element id
					triggerObject: 'zpGrid' + iGridId + 'Row' + iRowId,

					// Passthrough argument
					triggerArgs: iRowId

				});

			}

			// Setup new triggers
			oMenu.setTriggerObject(oTriggerObject);

		}

		/*
		 * Initialize grid
		 */
		var 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 "gridContainer"
			container: 'gridContainer',

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

			// Display 10 rows per page
			rowsPerPage: 10,

			// Initially sort by Country
			sortColumn: 0,

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

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

			// Add some event listeners
			eventListeners: {
				gridRefreshed: onGridRefresh
			}

		});

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