Skip to content
Newer
Older
100644 1483 lines (1123 sloc) 61.3 KB
fcc4fff @phiggins42 monster commit from moinconverter, which is always done prior to the …
phiggins42 authored Nov 20, 2011
1 .. _dojox/grid/DataGrid:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
2
f89feb8 @wkeese regex change of level 1 headers to ====\nTEXT\n==== and level 2 heade…
wkeese authored Nov 28, 2011
3 ===================
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
4 dojox.grid.DataGrid
5 ===================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
6
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
7 :Project owners: Scott J. Miles, Steve Orvell, Bryan Forbes
8e25854 @wkeese :Available: --> :since:
wkeese authored Dec 13, 2011
8 :since: V1.2
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
9 :jsDoc: http://api.dojotoolkit.org/jsdoc/HEAD/dojox.grid.DataGrid
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
10
c15cbf2 @wkeese standardize spacing on directives like .. js
wkeese authored Dec 20, 2011
11 .. contents ::
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
12 :depth: 2
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
13
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
14 A visual grid/table much like a spreadsheet.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
15
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
16 Introduction
17 ============
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
18
59e6f31 @zhuxw Add gridx
zhuxw authored Nov 19, 2012
19 Grids are familiar in the client/server development world. Basically a grid is a kind of mini spreadsheet, commonly used to display details on master-detail forms. From HTML terms, a grid is a "super-table" with its own scrollable viewport. This document covers the ``dojox/grid/DataGrid``. Beginning with Dojo 1.7, you should use ``dgrid`` or ``gridx``, next-generation grid components that take full advantage of modern browsers and object stores.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
20
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
21
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
22 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
23 :djConfig: async: true, parseOnLoad: false
24
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
25 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
26
531e00a Rollback; wrong file.
haysmark authored May 15, 2012
27 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
28 function(lang, DataGrid, ItemFileWriteStore, dom){
29
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
30 /*set up data store*/
31 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
32 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
33 items: []
34 };
35 var data_list = [
36 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
37 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
38 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
39 ];
40 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
41 for(var i = 0, l = data_list.length; i < rows; i++){
42 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
43 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
44 var store = new ItemFileWriteStore({data: data});
45
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
46 /*set up layout*/
47 var layout = [[
48 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
49 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
50 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
51 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
52 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
53
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
54 /*create a new grid*/
55 var grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
56 id: 'grid',
57 store: store,
58 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
59 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
60
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
61 /*append the new grid to the div*/
62 grid.placeAt("gridDiv");
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
63
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
64 /*Call startup() to render the grid*/
65 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
66 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
67
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
68
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
69 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
70
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
71 <div id="gridDiv"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
72
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
73 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
74
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
75 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
76
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
77 /*Grid needs an explicit height by default*/
a51fb92 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
78 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
79 height: 20em;
80 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
81
82
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
83 A structure is an array of views and a view is an array of cells.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
84
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
85 This Widget inherits from dojo.grid._Grid and hence all methods and properties pertaining to that Widget also apply here.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
86
87
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
88 Usage
89 =====
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
90
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
91 At a high level, a DataGrid can be defined either declaratively in HTML markup or programmatically in JavaScript. In markup, the following high level structure is defined:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
92
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
93 .. html ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
94
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
95 <table data-dojo-type="dojox.grid.DataGrid" >
96 <thead>
97 <tr>
98 <th field="fieldName" width="200px">Column Name</th>
99 <th field="fieldName" width="200px">Column Name</th>
100 </tr>
101 </thead>
102 </table>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
103
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
104 The ``<table>`` tag defines that a DataGrid is being created. The nested ``<th>`` tags define the columns on the table.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
105
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
106 *note:* the ``<thead>`` element is *required* in order for the DataGrid to read this markup as the layout.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
107
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
108 In the ``<th>`` tag in a declarative definition of a DataGrid, the following attributes are permitted
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
109
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
110 field
111 The name of the field in the store data. ``New in 1.4`` If you set the value of the field to "_item", then your formatter will be called with the entire item from the store - instead of just one field value
112 ``New in 1.4`` fields
113 An array of field names, when used, all values of all matching fields are returned to the grid
114 width
115 The width of the column
116 cellType
117 The type of cell in the column. Allowable cell types include
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
118
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
119 * ``dojox.grid.cells.Bool``
120 * ``dojox.grid.cells.Select``
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
121
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
122 options
123 Used when cellType is ``dojox.grid.cells.Select`` to name the allowable options
124 editable
125 A boolean value that declares whether or not the cell is editable
126 ``New in 1.4`` draggable
127 A boolean value that you can set to false if you want a cell not to be draggable but others to be draggable
df54060 @phiggins42 handy info.
phiggins42 authored May 3, 2012
128 sortDesc
129 A boolean value setting the default initial sort direction for a cell. When no sort action has been taken on a cell this value determines which direction (true = descending, false/default = ascending) to sort the columm upon first clicking the header. Subsequent clicks simply toggle the existing direction.
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
130 formatter
131 A JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML. In dojo 1.3 and earlier, it should *not* be a dijit Widget as that is not parsed. ``New in 1.4`` You can return a dijit Widget and it will be placed in that location in the cell. ``New in 1.4`` You can also return a dojo.Deferred and can then pass the deferred's callback function a string to insert at a later point in time.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
132
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
133 - Note: When a widget is returned from a formatter, it's important to use the following way to ensure widget.destroyed() is called when the page containing it get destroyed - this may happen when grid is scrolled away from the current view-port or when the grid instance is destroyed, otherwise significant memory increase will be observed when Grid is kept scrolling or creating/destroying. See the related `#13961 <http://bugs.dojotoolkit.org/ticket/13961>`_
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
134
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
135
136
137 - Note that the dijit/form/Button module must have been loaded before executing this function or the require will throw an error. There is an example of creating a widget in a cell in the examples section, "`Inserting a dijit widget (Button) in a field`_".
138
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
139 .. js ::
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
140
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
141 function formatter(){
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
142 var w;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
143 require(['dijit/form/Button', 'dojo/domReady!'],
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
144 function(Button) {
145 w = new Button({...});
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
146 w._destroyOnRemove=true;
147 });
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
148 return w;
149 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
150
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
151 get
152 A JavaScript function that is called which returns the value to be shown in the cell. The function is passed two parameters. The first is the row index in the DataGrid. The second is the DataStore record/item. Given these two parameters, the function is expected to know what to return. It should *not* be a dijit Widget as that is not parsed. Care should be taken that the ``item`` parameter is not null. Tests have shown that the function may be called more often than it should be and this is highlighted with an ``item = null``.
153 hidden
b4cda0d Aded setColumnvisibility doc
beuss authored Dec 15, 2011
154 This boolean property can be used to hide a column in the table. If its value is ``true`` the column is hidden. If ``false`` the column is displayed. You can toggle column visibility using ``grid.layout.setColumnVisibility(/* int */columnIndex, /* bool */ visible)``
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
155
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
156 The value of the text between a ``<th>`` and ``</th>`` is used as the header label for the column.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
157
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
158 The structure of the table can also be set programmatically. The ``<table>`` attribute called ``structure`` can name an object that defines the cell structure.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
159
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
160 Event handling
161 --------------
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
162 Event handlers can be associated with the DataGrid. Many of these events are expected to be handled by the DataGrid itself. Grabbing these events without passing the event on to the grid can cause unexpected results. As such, it is wise to add an event handler as opposed to replace the event handler. Consider using :ref:`, Buttondojo/on() <dojo/on>`.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
163
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
164 The following handlers are defined:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
165
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
166 onStyleRow(inRow)
167 TBD
168 onMouseOver(e)
169 Fired when the mouse is over the grid. The event contains references to the grid, cell and rowIndex.
170 onMouseOut(e)
171 Fired when the mouse is leaves the grid. The event contains references to the grid, cell and rowIndex.
172 onRowClick(e)
173 Fired when a row is clicked. The event contains references to the grid, cell and rowIndex.
174 onRowDblClick(e)
175 Fired when a row is double clicked. The event contains references to the grid, cell and rowIndex.
176 onRowContextMenu(e)
177 Fired when a row is selected and then right clicked.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
178
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
179 And many more ...
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
180
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
181 For the above, an event contains the normal DOM Events plus
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
182
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
183 cell
184 TBD
185 cellIndex
186 TBD
187 cellNode
188 TBD
189 grid
190 The DataGrid that caused the event
191 rowIndex
192 The row index in the grid
193 rowNode
194 TBD
195 sourceView
196 TBD
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
197
198
199
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
200 DataGrid options
201 ----------------
202 In addition to the options for the columns, there are also options available for the DataGrid itself.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
203
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
204 data-dojo-id
205 The name of a JavaScript variable that will be created that will hold the grid object. This can then be referenced in scripts.
206 store
207 The name of JavaScript variable that holds the store object used to get data for the grid.
208 rowSelector
209 Specifying this table option adds a selection area on the left of the table to make row selection easier. The value of this option is a width to be used for the selector.
210 selectionMode
211 This option defines how row selection is handled. Available options are:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
212
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
213 * none - No row selection.
214 * single - Only single row selection.
215 * multiple - Multiple explicit row selection. A single click selects a row a second single click deselects the row.
216 * extended - Multiple row selection including ranges (default).
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
217
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
218 columnReordering
219 This boolean property allows columns to be dynamically reordered. When enabled, a column header can be dragged and dropped at a new location causing the column to be moved.
220 headerMenu
221 A menu can be associated with a header. This attribute names a ``dijit.Menu`` which is displayed when the header is clicked.
222 autoHeight
223 If true, automatically expand grid's height to fit data. If numeric, defines the maximum rows of data displayed (if the grid contains less than **autoHeight** rows, it will be shrunk).
224 autoWidth
225 Automatically set width depending on columns width
226 singleClickEdit
227 A boolean value that defines whether a single or double click is needed to enter cell editing mode.
228 loadingMessage
229 The message to show while the content of the grid is loading.
230 errorMessage
231 The message to show if an error has occurred loading the data.
df54060 @phiggins42 handy info.
phiggins42 authored May 3, 2012
232 sortInfo
233 Set an initial sort start for the grid, based on the cell. Eg: sortInfo: 1 would sort cell 1 (1-based index) descending, -3 would sort cell 3 ascending.
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
234 ``New in 1.3`` selectable
235 Set to true if you want to enable text selection on your grid.
236 ``New in 1.4`` formatterScope
237 Set to an object that you would like to execute your formatter functions within the scope of.
238 ``New in 1.4`` updateDelay
239 A value, in milliseconds (default 1) to delay updates when receiving notifications from a datastore. Set to 0 to update your grid immediately. A larger value will result in a more performant grid when there are lots of datastore notifications happening, but there will be significant lag time in the update on-screen. The default value of 1 will basically re-render changes once the browser is idle.
240 ``New in 1.4`` initialWidth
241 A CSS string value to use for autoWidth grids as their initial width. If not set, it defaults to the sum width of all columns. If set, it overrides any values passed to the grid via css or the html style parameter on the source node.
242 ``New in 1.3.2`` escapeHTMLInData
243 This will escape HTML brackets from the data to prevent HTML from user-inputted data being rendered with may contain JavaScript and result in XSS attacks. This is true by default, and it is recommended that it remain true. Setting this to false will allow data to be displayed in the grid without filtering, and should be only used if it is known that the data won't contain malicious scripts. If HTML is needed in grid cells, it is recommended that you use the formatter function to generate the HTML (the output of formatter functions is not filtered, even with escapeHTMLInData set to true). Setting this to false can be done:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
244
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
245 .. js ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
246
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
247 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false" ...>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
248
df54060 @phiggins42 handy info.
phiggins42 authored May 3, 2012
249
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
250 Editing cells
251 -------------
252 A cell can be defined as editable by setting its ``editable`` flag to be ``true``. In the markup, this is achieved by adding the attribute ``editable="true"`` to the ``<th>`` definition.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
253
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
254 If a cell is editable and no ``cellType`` is supplied, then double clicking on the cell will provide an in-place text editor to change its value.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
255
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
256 If the type of the cell is a boolean, then its value is displayed as either the string ``true`` or ``false``. If a check box is desired, setting the ``cellType`` to be ``dojox.grid.cells.Bool`` and marking it as editable will make a checkbox appear.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
257
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
258 If the cell type is defined to be ``dojox.grid.cells.Select`` then a combo-box/pulldown is available showing allowable options.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
259
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
260 .. Question: How to make a checkbox appear when we don't want the cell to be editable?
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
261
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
262 Data for the grid
263 -----------------
264 Data for the grid comes from a data store. The data can be specified declaratively using the ``store="name"`` attribute where ``name`` is the name of a global JavaScript object that represents a DataStore. This could previously have been created as follows:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
265
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
266 .. html ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
267
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
268 <span data-dojo-type="dojo.data.ItemFileWriteStore"
269 data-dojo-id="myStore" data-dojo-props="url:'/myData.json'">
270 </span>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
271
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
272 Programmatically, a store can be assigned to a DataGrid with the ``setStore(myStore)`` method call.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
273
59e6f31 @zhuxw Add gridx
zhuxw authored Nov 20, 2012
274 It should be noted that as of grid 1.3.1, the grid searched your datastore and converts all < to < to avoid a cross-site scripting attack. Site developers who can guarantee that their data is safe can add a formatter function to convert all < back to < if they need the datastore information parsed by the browser.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
275
276
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
277 Locking columns from horizontal scrolling
278 -----------------------------------------
279 A set of columns can be *locked* to prevent them from scrolling horizontally while allows other columns to continue to scroll. To achieve this, the ``<colgroup>`` tags can be inserted before the ``<thead>`` tag. For example, if a DataGrid has four columns, the following will lock the first column but allow the remaining columns the ability to scroll horizontally:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
280
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
281 .. html ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
282
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
283 <colgroup span="1" noscroll="true"></colgroup>
284 <colgroup span="3"></colgroup>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
285
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
286 Auto-width columns
287 ------------------
288 Columns with width="auto" are not fully supported, and do not work in all cases. In addition, they are poorly performant.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
289
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
290 The main reason for this is the "dynamic" nature of the grid itself. The grid needs to start laying itself out *before* it has any data - so it does not have a way to "know" how wide to draw the columns - because we don't have the data. Depending on the browser, we are able to make a "best guess" - but it doesn't work in all situations.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
291
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
292 It is strongly suggested that users move away from using width="auto" columns. We are even considering deprecating their use in upcoming releases of the grid.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
293
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
294 The only way that we are able to support width="auto" is to:
295 1. require that all data be present (so we can figure out the "widest" value for the column)
296 2. render all data at once (so that we are sure we have rendered the "widest" value)
297 3. render the grid twice (once to lay out the values and calculate the widest one - another time to actually set all the widths to the width of the widest value)
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
298
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
299 Each of these greatly hurts the grid - and in reality is not feasible. #1 would mean that you are unable to use stores such as JsonRestStore or QueryReadStore with a grid. #2 will really impact your performance...because it throws away all the benefits of incremental rendering and virtual scrolling...you'll never be able to have million-row grids like you can right now. #3 is bad - especially in combination with #2 - since, in effect, it will take twice as long to display your grid...and you will get "flickering" - that is, you will see it render once with different cell widths, and then it will redraw again.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
300
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
301 Again - don't use width="auto". It's very much not recommended, and will not be supported in the future.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
302
303
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
304 Multi-rowed *rows*
305 ------------------
306 We are used to a row in a table being a single line of data. DataGrid provides the ability for a single logical row to contain multiple lines of data. This can be achieved by adding additional ``<tr>`` tags into the DataGrid declaration.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
307
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
308 For example:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
309
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
310 .. js ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
311
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
312 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="store:myTestStore" style="width: 800px; height: 300px;">
313 <thead>
314 <tr>
315 <th field="A" width="200px">Col1</th>
316 <th field="B" width="200px">Col2</th>
317 <th field="C" width="200px">Col3</th>
318 </tr>
319 <tr>
320 <th field="D" colspan="3">Col4</th>
321 </tr>
322 </thead>
323 </table>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
324
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
325 Results in a grid with columns A, B and C and a fourth *column* called D which exists on the same row of data.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
326
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
327 Required CSS
328 ------------
329 Some style sheets supplied with the Dojo distribution are required:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
330
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
331 .. css ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
332
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
333 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/Grid.css" >
334 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
335
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
336 .dojoxGrid table {
337 margin: 0;
338 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
339
340
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
341 DataGrid object functions
342 -------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
343
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
344 getItem(idx)
345 Returns the store ``item`` at the given row index.
346 getItemIndex(item)
347 Returns the row index for the given store ``item``.
348 setStore
349 TBD
350 setQuery
351 TBD
352 setItems
353 TBD
354 filter
355 TBD
356 sort
357 TBD
358 sortInfo
359 A numerical value indicating what column should be sorted in the grid. e.g. "1" would mean "first column, ascending order. "-2" would mean "second column, descending order". Note that this replaces the alternative approach of providing queryOptions to the store's fetch() invocation. Defined on dojox.grid._Grid.
360 canSort
67f7d9e @wkeese Fix spacing for braces, function(), if(), while(), for(), else, etc. …
wkeese authored Dec 1, 2011
361 canSort is called by the grid to determine if each column should be sortable. It takes a single integer argument representing the column index, which is positive for ascending order and negative for descending order, and should return true if that column should be sortable in that direction, and false if not. For example, to only allow the second column to be sortable, in either direction: "function canSort(col){ return Math.abs(col) === 2; }"
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
362 getSortProps
363 TBD
364 removeSelectedRows
365 TBD
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
366
367
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
368 Unknown at this time
369 --------------------
370 Here are some undocumented (here) components:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
371
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
372 * elasticView - An attribute on the table
373 * rowsPerPage - An attribute on the table
374 * query - An attribute on the table
375 * clientSort - An attribute on the table
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
376
377
378
379
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
380 Getting a value from a row knowing the row index
381 ------------------------------------------------
40dc7a9 @wkeese dojox/ spelling
wkeese authored Nov 23, 2011
382 Assuming that you know the row index and the name of the column whose value you wish to retrieve, you can obtain that value using the following snippet:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
383
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
384 .. js ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
385
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
386 var value = grid.store.getValue(grid.getItem(rowIndex), name);
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
387
388
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
389 IMPORTANT INFORMATION about Formatting and Security
390 ===================================================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
391
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
392 Preventing cross-site scripting (XSS) attacks
393 ---------------------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
394
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
395 To avoid cross-site scripting (XSS) attacks, the grid will escape any HTML data that comes from an external source (datastore). This escaping also applies to any values that are returned from a custom get function on a cell. If you would like to format your data using HTML, you should create a custom formatter function for the cell and apply your formatting there instead.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
396
59e6f31 @zhuxw Add gridx
zhuxw authored Nov 20, 2012
397 Site developers who can guarantee that their data is safe can add a formatter function to convert all < back to < if they need the datastore information parsed by the browser.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
398
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
399 Finally, you can use the escapeHTMLInData option - however, this is `VERY HIGHLY DISCOURAGED` as it opens your application up to XSS attacks.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
400
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
401 Examples
402 ========
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
403
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
404 The following examples are for the new Grid 1.2 and changes for Dojo version 1.7.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
405
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
406 A simple Grid
407 -------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
408
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
409 This example shows how to create a simple Grid programmatically.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
410
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
411
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
412 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
413 :djConfig: async: true, parseOnLoad: false
414
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
415 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
416
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
417 require(['dojo/_base/lang', 'dojox/grid/DataGrid' , 'dojo/data/ItemFileWriteStore' , 'dojo/dom' , 'dojo/domReady!'],
418 function(lang, DataGrid, ItemFileWriteStore, Button, dom){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
419 /*set up data store*/
420 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
421 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
422 items: []
423 };
424 var data_list = [
425 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
426 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
427 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
428 ];
429 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
430 for(var i = 0, l = data_list.length; i < rows; i++){
431 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
432 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
433 var store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
434
435 /*set up layout*/
436 var layout = [[
437 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
438 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
439 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
440 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
441 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
442
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
443 /*create a new grid*/
444 var grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
445 id: 'grid',
446 store: store,
447 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
448 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
449
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
450 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
451 grid.placeAt("gridDiv");
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
452
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
453 /*Call startup() to render the grid*/
454 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
455 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
456
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
457 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
458
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
459 <div id="gridDiv"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
460
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
461 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
462
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
463 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
464
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
465 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
466 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
467 height: 20em;
468 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
469
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
470 Note the grid.startup() command after constructing the DataGrid. Earlier development
471 versions of DataGrid didn't require this but as of 1.2.0b1, you must call
472 startup() as you would with other dijits, or the grid will not render.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
473
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
474 Working with selections
475 -----------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
476
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
477 To get the current selected rows of the grid, you can use the method yourGrid.selection.getSelected(). You will get an array of the selected items. The following code shows an example:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
478
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
479
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
480 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
481 :djConfig: async: true, parseOnLoad: true
482
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
483 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
484
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
485 require(['dojo/_base/array', 'dojo/_base/lang', 'dojo/_base/event', 'dojo/on', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/parser', 'dojo/domReady!'],
486 function(array, lang, event, on, DataGrid, ItemFileWriteStore, Button, dom, parser){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
487 parser.parse();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
488 /*set up data store*/
489 var data = {
490 identifier: 'id',
491 items: []
492 };
493 var data_list = [
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
494 { col1: 'normal', col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
495 { col1: 'important', col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
496 { col1: 'important', col2: false, col3: 'Signs can be selectively', col4: 19.34}
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
497 ];
498 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
499 for(var i = 0, l = data_list.length; i < rows; i++){
500 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
501 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
502 var store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
503
504 /*set up layout*/
505 var layout = [[
506 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
507 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
508 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
509 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
510 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
511
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
512 /*create a new grid*/
513 grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
514 id: 'grid',
515 store: store,
516 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
517 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
518
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
519 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
520 grid.placeAt('gridDiv');
521
522 /* attach an event handler */
523 on(button1,'click',
524 function(e){
525 var items = grid.selection.getSelected();
526 if(items.length) {
527 /* Iterate through the list of selected items.
528 The current item is available in the variable
529 'selectedItem' within the following function: */
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
530 array.forEach(items, function(selectedItem){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
531 if(selectedItem !== null){
532 /* Iterate through the list of attributes of each item.
533 The current attribute is available in the variable
534 'attribute' within the following function: */
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
535 array.forEach(grid.store.getAttributes(selectedItem), function(attribute){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
536 /* Get the value of the current attribute:*/
537 var value = grid.store.getValues(selectedItem, attribute);
538 /* Now, you can do something with this attribute/value pair.
539 Our short example shows the attribute together
540 with the value in an alert box, but we are sure, that
541 you'll find a more ambitious usage in your own code:*/
542 alert('attribute: ' + attribute + ', value: ' + value);
543 }); /* end forEach */
544 } /* end if */
545 }); /* end forEach */
546 } /* end if */
547 event.stop(e);
548 }
549 );
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
550
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
551 /*Call startup() to render the grid*/
552 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
553 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
554
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
555 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
556
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
557 <p>
558 Select a single row or multiple rows in the Grid (click on the Selector on the left side of each row).
559 After that, a click on the Button "get all Selected Items" will show you each attribute/value of the
560 selected rows.
561 </p>
562
563 <div id="gridDiv"></div>
564
565 <p>
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
566 <span data-dojo-id="button1">
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
567 get all Selected Items
568 </span>
569 </p>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
570
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
571 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
572
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
573 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
574
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
575 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
576 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
577 height: 15em;
578 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
579
580
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
581
7aa5c1a @wkeese typos and American spelling
wkeese authored Dec 5, 2011
582 Grid 1.2 supports a new parameter "selectionMode" which allows you to control the behavior of the selection functionality:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
583
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
584 'none'
585 deactivates the selection functionality
586 'single'
587 let the user select only one item at the same time
588 'multiple'
33e0a74 @dylans Minor singular vs. plural typo.
dylans authored Dec 17, 2011
589 let the user select more than one item at the same time. First click selects an item, second deselects it
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
590 'extended' (default)
ff86d80 More information on selections.
beuss authored Dec 16, 2011
591 single click selects only the clicked item (deselecting any selected), Ctrl+click adds to selection, Shift+click add a range (behavior similar to select with ``multiple`` attribute set to ``multiple``)
592
593 Note that if you override ``onCellClick`` for whatever reason, selection won't work anymore, you should start your custom handler with ``this.inherited("onCellClick", arguments);`` to avoid issues.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
594
595
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
596 Editing data
597 ------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
598
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
599 Grid allows you to edit your data easily and send the changed values back to your server
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
600
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
601 First, you have to set a editor for each cell, you would like to edit:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
602
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
603
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
604 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
605 :djConfig: async: true, parseOnLoad: false
606
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
607 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
608
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
609 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojox/grid/cells/dijit', 'dojo/dom', 'dojo/domReady!'],
610 function(lang, DataGrid, ItemFileWriteStore, cells, dom){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
611 /*set up data store*/
612 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
613 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
614 items: []
615 };
616 var data_list = [
617 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
618 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
619 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
620 ];
621 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
622 for(var i = 0, l = data_list.length; i < rows; i++){
623 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
624 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
625 var store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
626
627 /*set up layout*/
628 var layout = [[
629 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
630 {'name': 'Column 2', 'field': 'col2', 'width': '100px', editable: true, type: dojox.grid.cells.CheckBox,styles: 'text-align: center;'},
631 {'name': 'Column 3', 'field': 'col3', 'width': '200px', editable: true},
632 {'name': 'Column 4', 'field': 'col4', 'width': '150px', editable: true}
633 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
634
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
635 /*create a new grid*/
636 var grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
637 id: 'grid',
638 store: store,
639 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
640 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
641
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
642 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
643 grid.placeAt("gridDiv");
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
644
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
645 /*Call startup() to render the grid*/
646 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
647 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
648
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
649 .. html ::
0eccfd1 @mello151 fix dojox grid example failures
mello151 authored Mar 26, 2015
650 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
651 <p class="info">
652 This example shows how to make columns editable. Please double click any of column 2, column 3 or column 4 to change the cell value.
653 </p>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
654
655
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
656 <div id="gridDiv"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
657
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
658 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
659
0eccfd1 @mello151 fix dojox grid example failures
mello151 authored Mar 26, 2015
660 //@import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
661
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
662 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
663 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
664 height: 20em;
665 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
666
667
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
668 Adding and Deleting data
669 ------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
670
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
671 If you want to add (remove) data programmatically, you just have to add (remove) it from the underlying data store.
672 Since DataGrid is "DataStoreAware", changes made to the store will be reflected automatically in the DataGrid.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
673
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
674
675
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
676 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
677 :djConfig: async: true, parseOnLoad: false
678
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
679 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
680
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
681 require(['dojo/_base/array', 'dojo/_base/lang', 'dojo/_base/event', 'dojo/on', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/parser', 'dojo/domReady!'],
682 function(array, lang, event, on, DataGrid, ItemFileWriteStore, Button, dom, parser){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
683 parser.parse();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
684 /*set up data store*/
685 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
686 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
687 items: []
688 };
689 var data_list = [
690 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
691 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
692 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
693 ];
694 var rows = 5;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
695 for(i = 0, l = data_list.length; i < rows; i++){
696 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
697 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
698 store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
699
700 /*set up layout*/
701 var layout = [[
702 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
703 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
704 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
705 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
706 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
707
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
708 /*create a new grid*/
709 grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
710 id: 'grid',
711 store: store,
712 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
713 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
714
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
715 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
716 grid.placeAt("gridDiv");
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
717
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
718 /* attach an event handler */
719 on(button2,'click',
720 function(e){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
721 /* set the properties for the new item: */
722 var myNewItem = {id: (++i), col1: "Mediate", col2: true, col3: 'Newly added values', col4: 8888};
723 /* Insert the new item into the store:*/
724 store.newItem(myNewItem);
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
725 }
726 );
727 /* attach an event handler */
728 on(button1,'click',
729 function(e){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
730 /* Get all selected items from the Grid: */
731 var items = grid.selection.getSelected();
732 if(items.length){
733 /* Iterate through the list of selected items.
734 The current item is available in the variable
735 "selectedItem" within the following function: */
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
736 array.forEach(items, function(selectedItem){
67f7d9e @wkeese Fix spacing for braces, function(), if(), while(), for(), else, etc. …
wkeese authored Dec 1, 2011
737 if(selectedItem !== null){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
738 /* Delete the item from the data store: */
739 store.deleteItem(selectedItem);
740 } /* end if */
741 }); /* end forEach */
742 } /* end if */
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
743 event.stop(e);
744 }
745 );
746
747
748 /*Call startup() to render the grid*/
749 grid.startup();
750 });
751
752 .. html ::
753
754 <p>
755 This example shows, how to add/remove rows
756 </p>
757 <div id='gridDiv'></div>
758
759 <p>
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
760 <span data-dojo-id='button2'>
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
761 Add Row
762 </span>
763
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
764 <span data-dojo-id='button1'>
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
765 Remove Selected Rows
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
766 </span>
767 </p>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
768
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
769 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
770
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
771 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
772
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
773 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
774 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
775 height: 15em;
776 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
777
778
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
779 Filtering data
780 --------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
781
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
782 The Grid offers a filter() method, to filter data from the current query (client-side filtering).
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
783
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
784
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
785 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
786 :djConfig: async: true, parseOnLoad: false
787
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
788 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
789
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
790 require(['dojo/_base/lang', 'dojo/on', 'dojo/parser', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
791 function(lang, on, parser, DataGrid, ItemFileWriteStore, dom){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
792 parser.parse();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
793 /*set up data store*/
794 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
795 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
796 items: []
797 };
798 var data_list = [
799 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
800 { col1: "important", col2: true, col3: 'Because a % sign always indicates', col4: 9.33},
801 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
802 ];
803 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
804 for(var i = 0, l = data_list.length; i < rows; i++){
805 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
806 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
807 var store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
808
809 /*set up layout*/
810 var layout = [[
811 {'name': 'Column 1', 'field': 'id', 'width': '100px'},
812 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
813 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
814 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
815 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
816
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
817 /*create a new grid*/
818 grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
819 id: 'grid',
820 store: store,
821 structure: layout,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
822 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
823
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
824 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
825 grid.placeAt("gridDiv");
826
827 /* attach an event handler */
828 on(button1,'click',
829 function(e){
830 /* Filter the movies from the data store: */
831 grid.filter({col2: true});
832 }
833 );
834
835 /* attach an event handler */
836 on(button2,'click',
837 function(e){
838 /* reset the filter: */
839 grid.filter({col2: '*'});
840 }
841 );
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
842
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
843 /*Call startup() to render the grid*/
844 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
845 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
846
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
847 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
848
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
849 <p class="info">
850 Click on the button "Filter" to filter the current data (only rows with Column 2 = true will be visible).<br />
851 Click on the button "Show all" to remove the filter.
852 </p>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
853
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
854 <div id="gridDiv"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
855
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
856 <p>
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
857 <span data-dojo-id='button1'>
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
858 Filter
859 </span>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
860
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
861 <span data-dojo-id='button2'>
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
862 Show all
863 </span>
864 </p>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
865
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
866 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
867
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
868 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
869
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
870 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
871 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
872 height: 15em;
873 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
874
875
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
876
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
877 Grid styling: Rows
878 ------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
879
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
880 The DataGrid provides extension points which allows you to apply custom css classes or styles to a row, depending on different parameters.
881 To use it, you just have to override default behavior by yours.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
882
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
883
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
884 .. code-example ::
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
885 :djConfig: async: true, parseOnLoad: false
886
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
887 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
888
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
889 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
890 function(lang, DataGrid, ItemFileWriteStore, dom){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
891 /*set up data store*/
892 var data = {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
893 identifier: "id",
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
894 items: []
895 };
896 var data_list = [
897 { col1: "normal", col2: true, col3: 'But are not followed by two hexadecimal', col4: 29.91},
898 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
899 { col1: "important", col2: true, col3: 'Signs can be selectively', col4: 19.34}
900 ];
901 var rows = 60;
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
902 for(var i = 0, l = data_list.length; i < rows; i++){
903 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
904 }
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
905 var store = new ItemFileWriteStore({data: data});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
906
907 /*set up layout*/
908 var layout = [[
909 {'name': 'Column 1', 'field': 'id', 'width': '150px'},
910 {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
911 {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
912 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
913 ]];
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
914
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
915 function myStyleRow(row){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
916 /* The row object has 4 parameters, and you can set two others to provide your own styling
917 These parameters are :
918 -- index : the row index
919 -- selected: whether or not the row is selected
920 -- over : whether or not the mouse is over this row
921 -- odd : whether or not this row index is odd. */
922 var item = grid.getItem(row.index);
923 if(item){
924 var type = store.getValue(item, "col2", null);
925 if(!!type){
926 row.customStyles += "color:blue;";
927 }
928 }
929 grid.focus.styleRow(row);
930 grid.edit.styleRow(row);
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
931 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
932
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
933 /*create a new grid*/
934 grid = new DataGrid({
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
935 id: 'grid',
936 store: store,
937 structure: layout,
938 onStyleRow: myStyleRow,
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
939 rowSelector: '20px'});
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
940
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
941 /*append the new grid to the div*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
942 grid.placeAt("gridDiv");
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
943
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
944 /*Call startup() to render the grid*/
945 grid.startup();
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
946 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
947
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
948 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
949
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
950 <div id="gridDiv"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
951
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
952 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
953
76ae79b @celikmus Update DataGrid.rst
celikmus authored Jul 6, 2013
954 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
955
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
956 /*Grid needs an explicit height by default*/
dc34874 Update dojox/grid/DataGrid.rst
Matthew Maxwell authored Nov 15, 2012
957 #gridDiv {
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
958 height: 20em;
959 }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
960
961
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
962
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
963 Formatting a Date Field
964 -----------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
965
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
966 Showing localized datetime data in grid is a very common requirement. Here's an example on how to do this using the formatter function, complete with localization.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
967
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
968
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
969 .. code-example ::
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
970 :width: 400
971 :height: 300
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
972 :djConfig: async: true, parseOnLoad: false
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
973
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
974 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
975
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
976 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
977 function(DataGrid, ItemFileReadStore, stamp, locale){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
978 function formatDate(datum){
979 /* Format the value in store, so as to be displayed.*/
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
980 var d = stamp.fromISOString(datum);
981 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
982 }
983
984 var layout = [
985 {name: 'Index', field: 'id'},
986 {name: 'Date', field: 'date', width: 10,
987 formatter: formatDate /*Custom format, change the format in store. */
988 }
989 ];
990
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
991 var store = new ItemFileReadStore({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
992 data: {
993 identifier: "id",
994 items: [
995 {id: 1, date: '2010-01-01'},
996 {id: 2, date: '2011-03-04'},
997 {id: 3, date: '2011-03-08'},
998 {id: 4, date: '2007-02-14'},
999 {id: 5, date: '2008-12-26'}
1000 ]
1001 }
1002 });
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1003 var grid = DataGrid({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1004 id: 'grid',
1005 store: store,
1006 structure: layout,
1007 autoWidth: true,
1008 autoHeight: true
1009 });
1010 grid.placeAt('gridContainer');
1011 grid.startup();
1012 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1013
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1014 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1015
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1016 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1017
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1018 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1019
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
1020 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojo/resources/dojo.css" >
1021 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dijit/themes/claro/claro.css" >
1022 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1023
1024
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1025
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1026 Editable Date Field
1027 -------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1028
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1029 Sometimes it's not enough to just show the datetime data, so here's another example on how to make the date field editable.
1030 Note: In editing mode, the text box will show the data in store, which is ISO format in this case; and no validation is provided.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1031
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1032
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1033 .. code-example ::
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1034 :width: 400
1035 :height: 300
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
1036 :djConfig: async: true, parseOnLoad: false
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1037
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1038 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1039
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1040 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
1041 function(DataGrid, ItemFileWriteStore, stamp, locale){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1042 function formatDate(datum){
1043 /* Format the value in store, so as to be displayed.*/
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1044 var d = stamp.fromISOString(datum);
1045 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1046 }
1047
1048 var layout = [
1049 {name: 'Index', field: 'id'},
1050 {name: 'Date', field: 'date', width: 10,
1051 formatter: formatDate, /*Custom format, change the format in store. */
1052 editable: true /*Editable cell, will show ISO format in a text box*/
1053 }
1054 ];
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1055 var store = new ItemFileWriteStore({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1056 data: {
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1057 identifier: 'id',
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1058 items: [
1059 {id: 1, date: '2010-01-01'},
1060 {id: 2, date: '2011-03-04'},
1061 {id: 3, date: '2011-03-08'},
1062 {id: 4, date: '2007-02-14'},
1063 {id: 5, date: '2008-12-26'}
1064 ]
1065 }
1066 });
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1067 var grid = new DataGrid({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1068 id: 'grid',
1069 store: store,
1070 structure: layout
1071 });
1072 grid.placeAt('gridContainer');
1073 grid.startup();
1074 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1075
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1076 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1077
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1078 <div id='gridContainer' style='width: 100%; height: 200px;'></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1079
1f9b928 @phiggins42 bulk deprecated removal and normalization
phiggins42 authored Nov 21, 2011
1080 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1081
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
1082 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojo/resources/dojo.css" >
1083 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dijit/themes/claro/claro.css" >
1084 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1085
1086
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1087
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1088 Using a dijit widget to edit a Date Field
1089 -----------------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1090
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1091 Using dijit.form.DateTextBox in editing mode will provide an improved user experience with easy date selection. Like everything in Dijit, the user experience is localized and respects cultural conventions. constraint is used to pass along properties to the DateTextBox widget.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1092
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1093
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1094 .. code-example::
1095 :width: 400
1096 :height: 300
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
1097 :djConfig: async: true, parseOnLoad: false
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1098
4cccd8a @wkeese .. javascript --> .. js
wkeese authored Dec 20, 2011
1099 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1100
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1101 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojox/grid/cells/dijit', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
1102 function(DataGrid, ItemFileWriteStore, cells, stamp, locale){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1103 function formatDate(datum){
1104 /*Format the value in store, so as to be displayed.*/
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1105 var d = stamp.fromISOString(datum);
1106 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1107 }
1108
1109 function getDateValue(){
1110 /*Override the default getValue function for dojox.grid.cells.DateTextBox*/
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1111 return stamp.toISOString(this.widget.get('value'));
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1112 }
1113
1114 var layout = [
1115 {name: 'Index', field: 'id'},
1116 {name: 'Date', field: 'date', width: 10,
1117 formatter: formatDate, /*Custom format, change the format in store. */
1118 editable: true, /*Editable cell*/
1119 type: dojox.grid.cells.DateTextBox, /*Use DateTextBox in editing mode*/
1120 getValue: getDateValue, /*Translate the value of DateTextBox to something the store can understand.*/
1121 constraint: {formatLength: 'long'} /*Format the date value shown in DateTextBox*/
1122 }
1123 ];
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1124 var store = new ItemFileWriteStore({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1125 data: {
1126 identifier: "id",
1127 items: [
1128 {id: 1, date: '2010-01-01'},
1129 {id: 2, date: '2011-03-04'},
1130 {id: 3, date: '2011-03-08'},
1131 {id: 4, date: '2007-02-14'},
1132 {id: 5, date: '2008-12-26'}
1133 ]
1134 }
1135 });
1136 var grid = new dojox.grid.DataGrid({
1137 id: 'grid',
1138 store: store,
1139 structure: layout
1140 });
1141 grid.placeAt('gridContainer');
1142 grid.startup();
1143 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1144
c15cbf2 @wkeese standardize spacing on directives like .. js
wkeese authored Dec 20, 2011
1145 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1146
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1147 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1148
c15cbf2 @wkeese standardize spacing on directives like .. js
wkeese authored Dec 20, 2011
1149 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1150
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
1151 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojo/resources/dojo.css" >
1152 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dijit/themes/claro/claro.css" >
1153 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1154
1155
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1156
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1157 Using a dijit widget to edit a Date Field - with custom patterns
1158 ----------------------------------------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1159
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1160 Although ISO dates are recommended as a convenient and culturally neutral data format, the values in store may not be provided this way, so we have to parse them to convert them to Date objects. Here the constraint object is also used to pass along a custom formatter to override the default cultural user behavior with a different display.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1161
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1162
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1163 .. code-example::
1164 :width: 400
1165 :height: 300
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
1166 :djConfig: async: true, parseOnLoad: false
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1167
4cccd8a @wkeese .. javascript --> .. js
wkeese authored Dec 20, 2011
1168 .. js ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1169
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1170 require(['dojo/date/locale', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojox/grid/cells/dijit', 'dojo/date/stamp', 'dojo/domReady!'],
1171 function(locale, DataGrid, ItemFileWriteStore, cells, stamp){
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1172 var storePattern = 'yyyy/MM/dd';
1173 var displayPattern = 'yyyy, MMMM, d';
1174
1175 function formatDate(datum){
1176 /*Format the value in store, so as to be displayed.*/
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1177 var d = locale.parse(datum, {selector: 'date', datePattern: storePattern});
1178 return locale.format(d, {selector: 'date', datePattern: displayPattern});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1179 }
1180
1181 function getDateValue(){
1182 /*Override the default getValue function for dojox.grid.cells.DateTextBox*/
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1183 return locale.format(this.widget.get('value'), {selector: 'date', datePattern: storePattern});
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1184 }
1185
1186 var layout = [
1187 {name: 'Index', field: 'id'},
1188 {name: 'Date', field: 'date', width: 10,
1189 formatter: formatDate, /*Custom format, change the format in store. */
1190 editable: true, /*Editable cell*/
1191 type: dojox.grid.cells.DateTextBox,/*Use DateTextBox in editing mode*/
1192 getValue: getDateValue, /*Translate the value of DateTextBox to something the store can understand.*/
1193 constraint: {datePattern: displayPattern}/*Format the date value shown in DateTextBox*/
1194 }
1195 ];
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1196 var store = new ItemFileWriteStore({
54a2d64 @wkeese fix formatting and unneeded <script>/<style> tags
wkeese authored Dec 20, 2011
1197 data: {
1198 identifier: "id",
1199 items: [
1200 /*Not ISO format in store*/
1201 {id: 1, date: '2010/01/01'},
1202 {id: 2, date: '2011/03/04'},
1203 {id: 3, date: '2011/03/08'},
1204 {id: 4, date: '2007/02/14'},
1205 {id: 5, date: '2008/12/26'}
1206 ]
1207 }
1208 });
1209 var grid = new dojox.grid.DataGrid({
1210 id: 'grid',
1211 store: store,
1212 structure: layout
1213 });
1214 grid.placeAt('gridContainer');
1215 grid.startup();
1216 });
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1217
c15cbf2 @wkeese standardize spacing on directives like .. js
wkeese authored Dec 20, 2011
1218 .. html ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1219
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1220 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1221
c15cbf2 @wkeese standardize spacing on directives like .. js
wkeese authored Dec 20, 2011
1222 .. css ::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1223
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
1224 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojo/resources/dojo.css" >
1225 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dijit/themes/claro/claro.css" >
1226 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1227
1228
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1229 _`Inserting a dijit widget (Button) in a field`
1230 ----------------------------------------------------------------
1231
1232 .. code-example ::
1233 :width: 400
1234 :height: 300
3073895 @wkeese Set djConfig async: true and parseOnLoad: false
wkeese authored Jun 5, 2012
1235 :djConfig: async: true, parseOnLoad: false
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1236
1237 .. js ::
1238
1239 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dijit/form/Button', 'dojo/domReady!'],
444bdc2 @AverageGuy Updating examples to Dojo 1.7
AverageGuy authored Mar 9, 2012
1240 function(DataGrid, ItemFileReadStore, stamp, locale, Button){
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1241 function formatter(){
1242 var w = new Button({
1243 label: "Click me!",
1244 onClick: function() {
1245 alert("Thanks for all the fish. ");
1246 }
1247 });
1248 w._destroyOnRemove=true;
1249 return w;
1250 }
1251 function formatDate(datum){
1252 /* Format the value in store, so as to be displayed.*/
1253 var d = stamp.fromISOString(datum);
1254 return locale.format(d, {selector: 'date', formatLength: 'long'});
1255 }
1256
1257 var layout = [
1258 {name: 'Index', field: 'id'},
1259 {name: 'Date', field: 'date', width: 10,
1260 formatter: formatDate /*Custom format, change the format in store. */
1261 },
1262 {name: 'Message', field: 'message', width: 8,
1263 formatter: formatter /*Custom format, add a button. */
1264 }
1265 ];
1266
1267 var store = new ItemFileReadStore({
1268 data: {
1269 identifier: "id",
1270 items: [
1271 {id: 1, date: '2010-01-01'},
1272 {id: 2, date: '2011-03-04'},
1273 {id: 3, date: '2011-03-08'},
1274 {id: 4, date: '2007-02-14'},
1275 {id: 5, date: '2008-12-26'}
1276 ]
1277 }
1278 });
1279 var grid = new DataGrid({
1280 id: 'grid',
1281 store: store,
1282 structure: layout,
1283 autoWidth: true,
1284 autoHeight: true
1285 });
1286 grid.placeAt('gridContainer');
1287 grid.startup();
1288 });
1289 .. html ::
1290
1291 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
1292
1293 .. css ::
1294
8766c0e @celikmus Update DataGrid.rst
celikmus authored Jul 5, 2013
1295 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojo/resources/dojo.css" >
1296 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dijit/themes/claro/claro.css" >
1297 <link rel="stylesheet" type="text/css" href="{{baseUrl}}dojox/grid/resources/claroGrid.css" >
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1298
1299
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1300
1301
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1302 Tips
1303 ====
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1304
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1305 Creating a grid in a node with display: none
1306 --------------------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1307
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1308 It is not possible to create a grid as a child of a node which is set to be not displayed (display: none).
40dc7a9 @wkeese dojox/ spelling
wkeese authored Nov 23, 2011
1309 If you need to do this though for some reason you can set the grid's visibility to "hidden" and its position off screen
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1310
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1311 Hiding the Headers of a Grid
1312 ----------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1313
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1314 You can hide the columns of a Grid by using normal css:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1315
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
1316 .. html ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
1317
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1318 .dojoxGrid-header { display:none; }
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1319
1320
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1321 Refreshing the content of a grid
1322 --------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1323
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1324 There are times when you may wish to update the content of the grid. For example, a button on the screen may cause an xhrGet to retrieve a new set of information that you want to display in the table. The following code snippet can be used to update the grid:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1325
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
1326 .. js ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
1327
8c6f1c9 @AverageGuy Updating examples to 1.7
AverageGuy authored Mar 9, 2012
1328 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/domReady!'],
1329 function(DataGrid, ItemFileWriteStore ){
1330 ...
1331 var newStore = new ItemFileReadStore({data: {... some data ...});
1332 var grid = dijit.byId("gridId");
1333 grid.setStore(newStore);
1334 };
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1335
1336
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1337 Layout multiple views by percentage
1338 -----------------------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1339
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored Nov 20, 2011
1340 Percentages can be used with Grid layout for view or cell width, but there is one important precondition - explicit view widths are required in percentage, 'px' or 'em' in order to make the percentages work appropriately, e.g.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored Nov 20, 2011
1341
c49c87d @phiggins42 normalization
phiggins42 authored Nov 21, 2011
1342 .. js ::
ffa767c @phiggins42 removing :linenos: rather than reverting previous commit. revert both…
phiggins42 authored Nov 21, 2011
1343
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored