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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>Test Dijit Cell Editors</title>
| <meta name="viewport" content="width=570">
| <style>
| @import "../../dojo/resources/dojo.css";
| @import "../css/dgrid.css";
| @import "../../dijit/themes/claro/claro.css";
| @import "../css/skins/claro.css";
| .heading {
| font-weight: bold;
| padding-bottom: 0.25em;
| }
| #grid .field-date, #grid .field-date2 {
| width: 16em;
| }
| #grid .field-integer {
| width: 6em;
| }
| #grid .field-bool {
| width: 6em;
| }
| .dgrid {
| margin: 10px;
| }
| </style>
| <script src="../../dojo/dojo.js"
| data-dojo-config="async: true, isDebug: true"></script>
| <script>
| require(["dgrid/List", "dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/Keyboard", "dgrid/Editor", "dijit/form/DateTextBox", "dijit/form/HorizontalSlider", "dijit/form/NumberSpinner", "dojo/_base/declare", "dgrid/test/data/createSyncStore", "dgrid/test/data/typesData", "dojo/domReady!"],
| function(List, Grid, Selection, Keyboard, Editor, DateTextBox, Slider, NumberSpinner, declare, createSyncStore, typesData){
| var columns = [
| {
| label: 'A Date (editable if after 1999)',
| field: 'date',
| editor: DateTextBox,
| canEdit: function (object, value) {
| return value.getFullYear() >= 2000;
| }
| },
| {
| label: 'Real Number',
| field: 'floatNum',
| editor: Slider
| },
| {
| label: 'Integer',
| field: 'integer',
| editor: NumberSpinner,
| editorArgs: {
| style: 'width: 5em;',
| constraints: {min: 0, max: 1550, places: 0}
| }
| },
| {
| label: 'Text editable if checkbox checked + saved',
| field: 'text',
| editor: "text",
| editOn: "dblclick",
| canEdit: function (object) {
| return object.bool;
| }
| },
| {
| label: 'Non-editable text',
| field: 'text2',
| sortable: false
| },
| {
| label: 'Another Date',
| field: 'date2',
| editor: DateTextBox,
| editOn: "dgrid-cellfocusin"
| },
| {
| label: 'CheckBox',
| field: 'bool',
| editor: "checkbox"
| }
| ];
|
| window.grid = new (declare([Grid, Selection, Keyboard, Editor]))({
| collection: createSyncStore({ data: typesData }),
| columns: columns,
| selectionMode: "single"
| }, "grid");
|
| grid.on("dgrid-datachange", function(evt){
| console.log("data changed: ", evt.oldValue, " -> ", evt.value);
| console.log("cell: ", evt.cell, evt.cell.row.id);
| });
| grid.on("dgrid-editor-show", function(evt){
| console.log("show editOn editor: ", evt);
| });
| grid.on("dgrid-editor-hide", function(evt){
| console.log("hide editOn editor: ", evt);
| });
|
| grid.on(".field-integer:dgrid-datachange", function(evt){
| if(evt.value > 1000){
| evt.preventDefault();
| alert("Values above 1000 will be rejected");
| // log data on a timeout to demonstrate that value wasn't changed
| setTimeout(function(){
| console.log("integer after prevented event:",
| evt.cell.row.data.integer);
| }, 0);
| }
| });
| });
|
| </script>
| </head>
| <body class="claro">
| <h2>A basic grid with editors</h2>
| (This test requires dijit to be installed)
| <div id="grid"></div>
| <button type="button" id="save" onclick="grid.save()">Save</button>
| </body>
| </html>
|
|
