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