1 files changed, 174 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_events.html b/includes/js/dojox/grid/tests/test_events.html
new file mode 100644
index 0000000..8ea61a4
--- /dev/null
+++ b/includes/js/dojox/grid/tests/test_events.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<title>Test dojox.Grid Events</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+	<style type="text/css">
+		@import "../_grid/Grid.css";
+		body,td,th {
+			font-family: Geneva, Arial, Helvetica, sans-serif;
+		}	
+		#grid { 
+			border: 1px solid;
+			border-top-color: #F6F4EB;
+			border-right-color: #ACA899;
+			border-bottom-color: #ACA899;
+			border-left-color: #F6F4EB;
+		}
+		#grid {
+			width: 50em;
+			height: 20em;
+			padding: 1px;
+			overflow: hidden;
+			font-size: small;
+		}
+		h3 {
+			margin: 10px 0 2px 0;
+		}
+		.fade {
+			/*background-image:url(images/fade.gif);*/
+		}
+		.no-fade {
+			/*background-image: none;*/
+		}
+		#eventGrid {
+			float: right;
+			font-size: small;
+		}
+	</style>
+	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojox.grid.Grid");
+		dojo.require("dojo.parser");
+	</script>
+	<script type="text/javascript">
+		// events to track
+		var eventRows = [
+			{ name: 'onCellClick' },
+			{ name: 'onRowClick', properties: ['rowIndex'] },
+			{ name: 'onCellDblClick' },
+			{ name: 'onRowDblClick', properties: ['rowIndex'] },
+			{ name: 'onCellMouseOver' },
+			{ name: 'onCellMouseOut' },
+			{ name: 'onCellMouseDown' },
+			{ name: 'onRowMouseOver' },
+			{ name: 'onRowMouseOut' },
+			{ name: 'onRowMouseDown' },
+			{ name: 'onHeaderCellClick' },
+			{ name: 'onHeaderClick', properties: ['rowIndex'] },
+			{ name: 'onHeaderCellDblClick' },
+			{ name: 'onHeaderDblClick', properties: ['rowIndex'] },
+			{ name: 'onHeaderCellMouseOver' },
+			{ name: 'onHeaderCellMouseOut' },
+			{ name: 'onHeaderCellMouseDown' },
+			{ name: 'onHeaderMouseOver' },
+			{ name: 'onHeaderMouseOut' },
+			{ name: 'onKeyDown', properties: ['keyCode'] },
+			{ name: 'onCellContextMenu' },
+			{ name: 'onRowContextMenu', properties: ['rowIndex'] },
+			{ name: 'onHeaderCellContextMenu' },
+			{ name: 'onHeaderContextMenu', properties: ['rowIndex'] }
+		];	
+		
+		getEventName = function(inRowIndex) {
+			return eventRows[inRowIndex].name;
+		};
+		
+		getEventData = function(inRowIndex) {
+			var d = eventRows[inRowIndex].data;
+			var r = [];
+			if (d)
+				for (var i in d)
+					r.push(d[i]);
+			else
+				r.push('na')
+			return r.join(', ');
+		}
+		
+		// grid structure for event tracking grid.
+		var eventView = {
+			noscroll: true,
+			cells: [[
+				{ name: 'Event', get: getEventName, width: 12 },
+				{ name: 'Data', get: getEventData, width: 10 }
+			]]
+		}
+		var eventLayout = [	eventView	];
+		
+		var fade = function(inNode) {
+			if (!inNode || !inNode.style) return;
+			var c = 150, step = 5, delay = 20;
+			var animate = function() {
+				c = Math.min(c + step, 255);
+				inNode.style.backgroundColor = "rgb(" + c + ", " + c + ", 255)";
+				if (c < 255) window.setTimeout(animate, delay);
+			}
+			animate();
+		}
+		
+		// setup a fade on a row. Must do this way to avoid caching of fade gif
+		updateRowFade = function(inRowIndex) {
+			var n = eventGrid.views.views[0].getRowNode(inRowIndex);
+			fade(n);
+		}
+		
+		// store data about event. By default track event.rowIndex and event.cell.index, but eventRows can specify params, which are event properties to track.
+		setEventData = function(inIndex, inEvent) {
+			var eRow = eventRows[inIndex];
+			eRow.data = {};
+			var properties = eRow.properties;
+			if (properties)
+				for (var i=0, l=properties.length, p; (p=properties[i] || i < l); i++)
+					eRow.data[p] = inEvent[p];
+			else
+				eRow.data =  {
+					row: (inEvent.rowIndex != undefined ? Number(inEvent.rowIndex) : 'na'), 
+					cell: (inEvent.cell && inEvent.cell.index != undefined ? inEvent.cell.index : 'na')
+				}	
+			eventGrid.updateRow(inIndex);
+			updateRowFade(inIndex);
+		}
+		
+		// setup grid events for all events being tracked.
+		setGridEvents = function() {
+			var makeEvent = function(inIndex, inName) {
+				return function(e) {
+					setEventData(inIndex, e);
+					dojox.VirtualGrid.prototype[inName].apply(this, arguments);
+				}
+			}
+			for (var i=0, e; (e=eventRows[i]); i++)
+				grid[e.name] = makeEvent(i, e.name);
+		}
+				
+		// Grid structure
+		var layout = [// array of view objects
+			{ type: 'dojox.GridRowView', width: '20px' },
+			{ noscroll: true, cells: [// array of rows, a row is an array of cells
+					[{ name: "Alpha", value: '<input type="checkbox"></input>', rowSpan: 2, width: 6, styles: 'text-align:center;' }, { name: "Alpha2", value: "Alpha2" }], 
+					[{ name: "Alpha3", value: "Alpha3" }]
+			]},
+			{ cells: [
+					[{ name: "Beta", value: 'simple'}, { name: "Beta2", value: "Beta2" }, { name: "Beta3", value: "Beta3" }, { name: "Beta4", value: "Beta4" }, { name: "Beta5", value: "Beta5" }], 
+				 	[{ name: "Summary", colSpan: 5, value: 'Summary' }]
+			]},
+			{	noscroll: true, cells: [
+					[{ name: "Gamma", value: "Gamma" }, { name: "Gamma2", value: "<button>Radiate</button>", styles: 'text-align:center;' }]]
+			}];
+		
+		dojo.addOnLoad(function() {
+			window["grid"] = dijit.byId("grid");
+			window["eventGrid"] = dijit.byId("eventGrid");
+			grid.rows.defaultRowHeight = 4;
+			setGridEvents(); 
+			eventGrid.updateRowCount(eventRows.length);
+			dojo.debug = console.log;
+		});	
+	</script>
+</head>
+<body>
+<h3>dojox.Grid Event Tracking</h3>
+<div id="eventGrid" autoWidth="true" autoHeight="true" structure="eventLayout" dojoType="dojox.VirtualGrid"></div>
+<div id="grid" rowCount="100" dojoType="dojox.VirtualGrid"></div>
+</body>
+</html>