1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>Test Keyboard Mixin with Tab key</title>
| <link rel="stylesheet" href="../../../css/dgrid.css">
| <style>
| .functionalTest .dgrid {
| height: 300px;
| width: 400px;
| margin: 20px;
| }
| </style>
| </head>
| <body class="functionalTest">
| <button id="showHeaderButton" tabindex="0">Show Header</button>
| <div id="grid1"></div>
| <div id="grid2"></div>
|
| <script src="../../../../dojo/dojo.js" data-dojo-config="async: true"></script>
| <script>
| var ready;
| require([
| 'dojo/_base/declare',
| 'dgrid/Grid',
| 'dgrid/Keyboard',
| 'dgrid/List',
| 'dojo/on'
| ], function (declare, Grid, Keyboard, List, on) {
| var i;
| var data;
| var button = document.getElementById('showHeaderButton');
| var KeyboardGrid = declare([Grid, Keyboard]);
| var grid1 = new KeyboardGrid({
| showHeader: true,
| columns: {
| id: 'ID',
| value: 'Value'
| }
| }, 'grid1');
| data = [];
| for(i = 0; i < 10; i++) {
| data.push({id: i, value: 'Value ' + i});
| }
| grid1.renderArray(data);
|
| var grid2 = new KeyboardGrid({
| showHeader: false,
| columns: {
| id: 'ID',
| value: 'Value'
| }
| }, 'grid2');
| data = [];
| for(; i < 20; i++) {
| data.push({id: i, value: 'Value ' + i});
| }
| grid2.renderArray(data);
| button.focus();
|
| on(button, 'click', function () {
| grid2.set('showHeader', true);
| button.focus();
| });
|
| ready = true;
| });
| </script>
|
| </body>
| </html>
|
|
