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
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>Test Cell Editors with Stores</title>
| <style>
| @import "../../../../dojo/resources/dojo.css";
| @import "../../../css/dgrid.css";
| @import "../../../../dijit/themes/claro/claro.css";
| @import "../../../css/skins/claro.css";
| </style>
| </head>
|
| <body class="claro">
| <h2>OnDemandGrid with editors</h2>
| <div id="grid"></div>
|
| <script src="../../../../dojo/dojo.js" data-dojo-config="async: 1"></script>
|
| <script>
| var grid,
| gridSaveStack = [],
| ready,
| // Toggled with each grid.save call to signal test module that a save is complete
| saveComplete,
| setEditorToTextBox;
|
| require([
| 'dojo/_base/declare',
| 'dojo/aspect',
| 'dgrid/OnDemandGrid',
| 'dgrid/Editor',
| 'dijit/form/TextBox',
| 'dgrid/test/data/createSyncStore'
| ], function (declare, aspect, OnDemandGrid, Editor, TextBox, createSyncStore) {
| var store = createSyncStore({ data: [
| { id: 0, name: '1', description: 'one' },
| { id: 1, name: '2', description: 'two' },
| { id: 2, name: '3', description: 'three' }
| ]});
|
| function createColumnConfig(editorType) {
| return {
| id: 'ID',
| name: {
| label: 'Name',
| editor: editorType || 'text',
| autoSave: true
| },
| description: {
| label: 'Description',
| editor: editorType || 'text',
| editOn: 'click',
| autoSave: true
| }
| };
| }
|
| grid = new (declare([OnDemandGrid, Editor]))({
| collection: store,
| columns: createColumnConfig('text')
| }, 'grid');
|
| aspect.before(grid, 'save', function () {
| var dirtyRowId;
|
| saveComplete = undefined;
| for (dirtyRowId in grid.dirty) {
| // col3 and col4 are the only columns with edit enabled; push the edited value
| // into 'gridSaveStack'
| gridSaveStack.push(grid.dirty[dirtyRowId].name || grid.dirty[dirtyRowId].description);
| }
| });
|
| aspect.after(grid, 'save', function (savePromise) {
| savePromise.then(function () {
| saveComplete = true;
| });
| });
|
| setEditorToTextBox = function () {
| grid.set('columns', createColumnConfig(TextBox));
| };
|
| ready = true;
| });
| </script>
| </body>
| </html>
|
|
