Page MenuHomeCode
Files F944914

test_events.html
No OneTemporary
Actions

test_events.html
View Options

<!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("dojox.grid._data.model");
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: 'onRowMouseOver' },
{ name: 'onRowMouseOut' },
{ name: 'onHeaderCellClick' },
{ name: 'onHeaderClick', properties: ['rowIndex'] },
{ name: 'onHeaderCellDblClick' },
{ name: 'onHeaderDblClick', properties: ['rowIndex'] },
{ name: 'onHeaderCellMouseOver' },
{ name: 'onHeaderCellMouseOut' },
{ 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>

File Metadata

Mime Type
text/html
Expires
Sat, Apr 26, 00:09 (1 w, 3 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26604
Default Alt Text
test_events.html (5 KB)

Event Timeline