Ticket #6750: test_events.html

File test_events.html, 5.5 kB (added by guest, 8 months ago)

Taken from the dojo standard tests

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4        <title>Test dojox.grid.Grid Events</title>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6        <style type="text/css">
7                @import "../resources/Grid.css";
8                body,td,th {
9                        font-family: Geneva, Arial, Helvetica, sans-serif;
10                }       
11                #grid {
12                        border: 1px solid;
13                        border-top-color: #F6F4EB;
14                        border-right-color: #ACA899;
15                        border-bottom-color: #ACA899;
16                        border-left-color: #F6F4EB;
17                }
18                #grid {
19                        width: 50em;
20                        height: 20em;
21                        padding: 1px;
22                        overflow: hidden;
23                        font-size: small;
24                }
25                h3 {
26                        margin: 10px 0 2px 0;
27                }
28                .fade {
29                        /*background-image:url(images/fade.gif);*/
30                }
31                .no-fade {
32                        /*background-image: none;*/
33                }
34                #eventGrid {
35                        float: right;
36                        font-size: small;
37                }
38        </style>
39        <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
40        <script type="text/javascript">
41                dojo.require("dojox.grid.Grid");
42                dojo.require("dojo.parser");
43        </script>
44        <script type="text/javascript">
45                // events to track
46                var eventRows = [
47                        { name: 'onCellClick' },
48                        { name: 'onRowClick', properties: ['rowIndex'] },
49                        { name: 'onCellDblClick' },
50                        { name: 'onRowDblClick', properties: ['rowIndex'] },
51                        { name: 'onCellMouseOver' },
52                        { name: 'onCellMouseOut' },
53                        { name: 'onCellMouseDown' },
54                        { name: 'onRowMouseOver' },
55                        { name: 'onRowMouseOut' },
56                        { name: 'onRowMouseDown' },
57                        { name: 'onHeaderCellClick' },
58                        { name: 'onHeaderClick', properties: ['rowIndex'] },
59                        { name: 'onHeaderCellDblClick' },
60                        { name: 'onHeaderDblClick', properties: ['rowIndex'] },
61                        { name: 'onHeaderCellMouseOver' },
62                        { name: 'onHeaderCellMouseOut' },
63                        { name: 'onHeaderCellMouseDown' },
64                        { name: 'onHeaderMouseOver' },
65                        { name: 'onHeaderMouseOut' },
66                        { name: 'onKeyDown', properties: ['keyCode'] },
67                        { name: 'onCellContextMenu' },
68                        { name: 'onRowContextMenu', properties: ['rowIndex'] },
69                        { name: 'onHeaderCellContextMenu' },
70                        { name: 'onHeaderContextMenu', properties: ['rowIndex'] }
71                ];     
72               
73                getEventName = function(inRowIndex) {
74   if(eventRows[inRowIndex].name == "onCellClick"){
75     alert('onCellClick');
76   }
77                        return eventRows[inRowIndex].name;
78                };
79               
80                getEventData = function(inRowIndex) {
81                        var d = eventRows[inRowIndex].data;
82                        var r = [];
83                        if (d)
84                                for (var i in d)
85                                        r.push(d[i]);
86                        else
87                                r.push('na')
88                        return r.join(', ');
89                }
90               
91                // grid structure for event tracking grid.
92                var eventView = {
93                        noscroll: true,
94                        cells: [[
95                                { name: 'Event', get: getEventName, width: 12 },
96                                { name: 'Data', get: getEventData, width: 10 }
97                        ]]
98                }
99                var eventLayout = [     eventView       ];
100               
101                var fade = function(inNode) {
102                        if (!inNode || !inNode.style) return;
103                        var c = 150, step = 5, delay = 20;
104                        var animate = function() {
105                                c = Math.min(c + step, 255);
106                                inNode.style.backgroundColor = "rgb(" + c + ", " + c + ", 255)";
107                                if (c < 255) window.setTimeout(animate, delay);
108                        }
109                        animate();
110                }
111               
112                // setup a fade on a row. Must do this way to avoid caching of fade gif
113                updateRowFade = function(inRowIndex) {
114                        var n = eventGrid.views.views[0].getRowNode(inRowIndex);
115                        fade(n);
116                }
117               
118                // store data about event. By default track event.rowIndex and event.cell.index, but eventRows can specify params, which are event properties to track.
119                setEventData = function(inIndex, inEvent) {
120                        var eRow = eventRows[inIndex];
121                        eRow.data = {};
122                        var properties = eRow.properties;
123                        if (properties)
124                                for (var i=0, l=properties.length, p; (p=properties[i] || i < l); i++)
125                                        eRow.data[p] = inEvent[p];
126                        else
127                                eRow.data =  {
128                                        row: (inEvent.rowIndex != undefined ? Number(inEvent.rowIndex) : 'na'),
129                                        cell: (inEvent.cell && inEvent.cell.index != undefined ? inEvent.cell.index : 'na')
130                                }       
131                        eventGrid.updateRow(inIndex);
132                        updateRowFade(inIndex);
133                }
134               
135                // setup grid events for all events being tracked.
136                setGridEvents = function() {
137                        var makeEvent = function(inIndex, inName) {
138                                return function(e) {
139                                        setEventData(inIndex, e);
140                                        dojox.grid.VirtualGrid.prototype[inName].apply(this, arguments);
141                                }
142                        }
143                        for (var i=0, e; (e=eventRows[i]); i++)
144                                grid[e.name] = makeEvent(i, e.name);
145                }
146                               
147                // Grid structure
148                var layout = [// array of view objects
149                        { type: 'dojox.grid._RowSelector', width: '20px' },
150                        { noscroll: true, cells: [// array of rows, a row is an array of cells
151                                        [{ name: "Alpha", value: '<input type="checkbox"></input>', rowSpan: 2, width: 6, styles: 'text-align:center;' }, { name: "Alpha2", value: "Alpha2" }],
152                                        [{ name: "Alpha3", value: "Alpha3" }]
153                        ]},
154                        { cells: [
155                                        [{ name: "Beta", value: 'simple'}, { name: "Beta2", value: "Beta2" }, { name: "Beta3", value: "Beta3" }, { name: "Beta4", value: "Beta4" }, { name: "Beta5", value: "Beta5" }],
156                                        [{ name: "Summary", colSpan: 5, value: 'Summary' }]
157                        ]},
158                        {       noscroll: true, cells: [
159                                        [{ name: "Gamma", value: "Gamma" }, { name: "Gamma2", value: "<button>Radiate</button>", styles: 'text-align:center;' }]]
160                        }];
161               
162                dojo.addOnLoad(function() {
163                        window["grid"] = dijit.byId("grid");
164                        window["eventGrid"] = dijit.byId("eventGrid");
165                        grid.rows.defaultRowHeight = 4;
166                        setGridEvents();
167                        eventGrid.updateRowCount(eventRows.length);
168                        dojo.debug = console.log;
169                });     
170        </script>
171</head>
172<body>
173<h3>dojox.grid.Grid Event Tracking</h3>
174<div id="eventGrid" autoWidth="true" autoHeight="true" structure="eventLayout" dojoType="dojox.grid.VirtualGrid"></div>
175<div id="grid" rowCount="100" dojoType="dojox.grid.VirtualGrid"></div>
176</body>
177</html>