Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 1483 lines (1122 sloc) 62.681 kb
fcc4fff8 »
2011-11-20 monster commit from moinconverter, which is always done prior to the …
1 .. _dojox/grid/DataGrid:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
2
f89feb82 »
2011-11-28 regex change of level 1 headers to ====\nTEXT\n==== and level 2 heade…
3 ===================
9dd52dc6 »
2011-11-20 mondo whitespace change
4 dojox.grid.DataGrid
5 ===================
d608cc59 »
2011-11-20 \r\n -> \n conversion.
6
9dd52dc6 »
2011-11-20 mondo whitespace change
7 :Project owners: Scott J. Miles, Steve Orvell, Bryan Forbes
8e258548 »
2011-12-13 :Available: --> :since:
8 :since: V1.2
9dd52dc6 »
2011-11-20 mondo whitespace change
9 :jsDoc: http://api.dojotoolkit.org/jsdoc/HEAD/dojox.grid.DataGrid
d608cc59 »
2011-11-20 \r\n -> \n conversion.
10
c15cbf24 »
2011-12-20 standardize spacing on directives like .. js
11 .. contents ::
9dd52dc6 »
2011-11-20 mondo whitespace change
12 :depth: 2
d608cc59 »
2011-11-20 \r\n -> \n conversion.
13
9dd52dc6 »
2011-11-20 mondo whitespace change
14 A visual grid/table much like a spreadsheet.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
15
9dd52dc6 »
2011-11-20 mondo whitespace change
16 Introduction
17 ============
d608cc59 »
2011-11-20 \r\n -> \n conversion.
18
59e6f31a »
2012-11-19 Add gridx
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
20
8c6f1c94 »
2012-03-09 Updating examples to 1.7
21
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
22 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
23 :djConfig: async: true, parseOnLoad: false
24
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
25 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
26
531e00a8 »
2012-05-15 Rollback; wrong file.
27 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
8c6f1c94 »
2012-03-09 Updating examples to 1.7
28 function(lang, DataGrid, ItemFileWriteStore, dom){
29
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
30 /*set up data store*/
31 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
32 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
43 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
44 var store = new ItemFileWriteStore({data: data});
45
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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'},
8c6f1c94 »
2012-03-09 Updating examples to 1.7
51 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
52 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
53
8c6f1c94 »
2012-03-09 Updating examples to 1.7
54 /*create a new grid*/
55 var grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
56 id: 'grid',
57 store: store,
58 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
59 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
60
8c6f1c94 »
2012-03-09 Updating examples to 1.7
61 /*append the new grid to the div*/
62 grid.placeAt("gridDiv");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
63
8c6f1c94 »
2012-03-09 Updating examples to 1.7
64 /*Call startup() to render the grid*/
65 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
66 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
67
8c6f1c94 »
2012-03-09 Updating examples to 1.7
68
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
69 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
70
9dd52dc6 »
2011-11-20 mondo whitespace change
71 <div id="gridDiv"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
72
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
73 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
74
76ae79b5 »
2013-07-06 Update DataGrid.rst
75 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
d608cc59 »
2011-11-20 \r\n -> \n conversion.
76
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
77 /*Grid needs an explicit height by default*/
a51fb92b »
2012-11-15 Update dojox/grid/DataGrid.rst
78 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
79 height: 20em;
80 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
81
82
9dd52dc6 »
2011-11-20 mondo whitespace change
83 A structure is an array of views and a view is an array of cells.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
84
9dd52dc6 »
2011-11-20 mondo whitespace change
85 This Widget inherits from dojo.grid._Grid and hence all methods and properties pertaining to that Widget also apply here.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
86
87
9dd52dc6 »
2011-11-20 mondo whitespace change
88 Usage
89 =====
d608cc59 »
2011-11-20 \r\n -> \n conversion.
90
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
92
c49c87d5 »
2011-11-21 normalization
93 .. html ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
94
9dd52dc6 »
2011-11-20 mondo whitespace change
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>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
103
9dd52dc6 »
2011-11-20 mondo whitespace change
104 The ``<table>`` tag defines that a DataGrid is being created. The nested ``<th>`` tags define the columns on the table.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
105
9dd52dc6 »
2011-11-20 mondo whitespace change
106 *note:* the ``<thead>`` element is *required* in order for the DataGrid to read this markup as the layout.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
107
9dd52dc6 »
2011-11-20 mondo whitespace change
108 In the ``<th>`` tag in a declarative definition of a DataGrid, the following attributes are permitted
d608cc59 »
2011-11-20 \r\n -> \n conversion.
109
9dd52dc6 »
2011-11-20 mondo whitespace change
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
d608cc59 »
2011-11-20 \r\n -> \n conversion.
118
9dd52dc6 »
2011-11-20 mondo whitespace change
119 * ``dojox.grid.cells.Bool``
120 * ``dojox.grid.cells.Select``
d608cc59 »
2011-11-20 \r\n -> \n conversion.
121
9dd52dc6 »
2011-11-20 mondo whitespace change
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
df54060c »
2012-05-03 handy info.
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.
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
132
9dd52dc6 »
2011-11-20 mondo whitespace change
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>`_
d608cc59 »
2011-11-20 \r\n -> \n conversion.
134
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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
c49c87d5 »
2011-11-21 normalization
139 .. js ::
8c6f1c94 »
2012-03-09 Updating examples to 1.7
140
9dd52dc6 »
2011-11-20 mondo whitespace change
141 function formatter(){
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
142 var w;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
143 require(['dijit/form/Button', 'dojo/domReady!'],
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
144 function(Button) {
145 w = new Button({...});
8c6f1c94 »
2012-03-09 Updating examples to 1.7
146 w._destroyOnRemove=true;
147 });
9dd52dc6 »
2011-11-20 mondo whitespace change
148 return w;
149 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
150
9dd52dc6 »
2011-11-20 mondo whitespace change
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
b4cda0d8 »
2011-12-15 Aded setColumnvisibility doc
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)``
d608cc59 »
2011-11-20 \r\n -> \n conversion.
155
9dd52dc6 »
2011-11-20 mondo whitespace change
156 The value of the text between a ``<th>`` and ``</th>`` is used as the header label for the column.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
157
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
159
9dd52dc6 »
2011-11-20 mondo whitespace change
160 Event handling
161 --------------
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
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>`.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
163
9dd52dc6 »
2011-11-20 mondo whitespace change
164 The following handlers are defined:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
165
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
178
9dd52dc6 »
2011-11-20 mondo whitespace change
179 And many more ...
d608cc59 »
2011-11-20 \r\n -> \n conversion.
180
9dd52dc6 »
2011-11-20 mondo whitespace change
181 For the above, an event contains the normal DOM Events plus
d608cc59 »
2011-11-20 \r\n -> \n conversion.
182
9dd52dc6 »
2011-11-20 mondo whitespace change
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
d608cc59 »
2011-11-20 \r\n -> \n conversion.
197
198
199
9dd52dc6 »
2011-11-20 mondo whitespace change
200 DataGrid options
201 ----------------
202 In addition to the options for the columns, there are also options available for the DataGrid itself.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
203
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
212
9dd52dc6 »
2011-11-20 mondo whitespace change
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).
d608cc59 »
2011-11-20 \r\n -> \n conversion.
217
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
df54060c »
2012-05-03 handy info.
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.
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
244
c49c87d5 »
2011-11-21 normalization
245 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
246
9dd52dc6 »
2011-11-20 mondo whitespace change
247 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false" ...>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
248
df54060c »
2012-05-03 handy info.
249
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
253
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
255
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
257
9dd52dc6 »
2011-11-20 mondo whitespace change
258 If the cell type is defined to be ``dojox.grid.cells.Select`` then a combo-box/pulldown is available showing allowable options.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
259
9dd52dc6 »
2011-11-20 mondo whitespace change
260 .. Question: How to make a checkbox appear when we don't want the cell to be editable?
d608cc59 »
2011-11-20 \r\n -> \n conversion.
261
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
265
c49c87d5 »
2011-11-21 normalization
266 .. html ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
267
9dd52dc6 »
2011-11-20 mondo whitespace change
268 <span data-dojo-type="dojo.data.ItemFileWriteStore"
269 data-dojo-id="myStore" data-dojo-props="url:'/myData.json'">
270 </span>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
271
9dd52dc6 »
2011-11-20 mondo whitespace change
272 Programmatically, a store can be assigned to a DataGrid with the ``setStore(myStore)`` method call.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
273
59e6f31a »
2012-11-19 Add gridx
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
275
276
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
280
c49c87d5 »
2011-11-21 normalization
281 .. html ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
282
9dd52dc6 »
2011-11-20 mondo whitespace change
283 <colgroup span="1" noscroll="true"></colgroup>
284 <colgroup span="3"></colgroup>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
285
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
289
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
291
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
293
9dd52dc6 »
2011-11-20 mondo whitespace change
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)
d608cc59 »
2011-11-20 \r\n -> \n conversion.
298
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
300
9dd52dc6 »
2011-11-20 mondo whitespace change
301 Again - don't use width="auto". It's very much not recommended, and will not be supported in the future.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
302
303
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
307
9dd52dc6 »
2011-11-20 mondo whitespace change
308 For example:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
309
c49c87d5 »
2011-11-21 normalization
310 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
311
9dd52dc6 »
2011-11-20 mondo whitespace change
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>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
324
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
326
9dd52dc6 »
2011-11-20 mondo whitespace change
327 Required CSS
328 ------------
329 Some style sheets supplied with the Dojo distribution are required:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
330
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
331 .. css ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
332
8766c0e0 »
2013-07-05 Update DataGrid.rst
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
9dd52dc6 »
2011-11-20 mondo whitespace change
336 .dojoxGrid table {
337 margin: 0;
338 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
339
340
9dd52dc6 »
2011-11-20 mondo whitespace change
341 DataGrid object functions
342 -------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
343
9dd52dc6 »
2011-11-20 mondo whitespace change
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
67f7d9eb »
2011-12-01 Fix spacing for braces, function(), if(), while(), for(), else, etc. …
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; }"
9dd52dc6 »
2011-11-20 mondo whitespace change
362 getSortProps
363 TBD
364 removeSelectedRows
365 TBD
d608cc59 »
2011-11-20 \r\n -> \n conversion.
366
367
9dd52dc6 »
2011-11-20 mondo whitespace change
368 Unknown at this time
369 --------------------
370 Here are some undocumented (here) components:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
371
9dd52dc6 »
2011-11-20 mondo whitespace change
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
d608cc59 »
2011-11-20 \r\n -> \n conversion.
376
377
378
379
9dd52dc6 »
2011-11-20 mondo whitespace change
380 Getting a value from a row knowing the row index
381 ------------------------------------------------
40dc7a99 »
2011-11-23 dojox/ spelling
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
383
c49c87d5 »
2011-11-21 normalization
384 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
385
9dd52dc6 »
2011-11-20 mondo whitespace change
386 var value = grid.store.getValue(grid.getItem(rowIndex), name);
d608cc59 »
2011-11-20 \r\n -> \n conversion.
387
388
9dd52dc6 »
2011-11-20 mondo whitespace change
389 IMPORTANT INFORMATION about Formatting and Security
390 ===================================================
d608cc59 »
2011-11-20 \r\n -> \n conversion.
391
9dd52dc6 »
2011-11-20 mondo whitespace change
392 Preventing cross-site scripting (XSS) attacks
393 ---------------------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
394
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
396
59e6f31a »
2012-11-19 Add gridx
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
398
9dd52dc6 »
2011-11-20 mondo whitespace change
399 Finally, you can use the escapeHTMLInData option - however, this is `VERY HIGHLY DISCOURAGED` as it opens your application up to XSS attacks.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
400
9dd52dc6 »
2011-11-20 mondo whitespace change
401 Examples
402 ========
d608cc59 »
2011-11-20 \r\n -> \n conversion.
403
8c6f1c94 »
2012-03-09 Updating examples to 1.7
404 The following examples are for the new Grid 1.2 and changes for Dojo version 1.7.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
405
9dd52dc6 »
2011-11-20 mondo whitespace change
406 A simple Grid
407 -------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
408
9dd52dc6 »
2011-11-20 mondo whitespace change
409 This example shows how to create a simple Grid programmatically.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
410
8c6f1c94 »
2012-03-09 Updating examples to 1.7
411
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
412 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
413 :djConfig: async: true, parseOnLoad: false
414
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
415 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
416
8c6f1c94 »
2012-03-09 Updating examples to 1.7
417 require(['dojo/_base/lang', 'dojox/grid/DataGrid' , 'dojo/data/ItemFileWriteStore' , 'dojo/dom' , 'dojo/domReady!'],
418 function(lang, DataGrid, ItemFileWriteStore, Button, dom){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
419 /*set up data store*/
420 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
421 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
432 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
433 var store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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'},
8c6f1c94 »
2012-03-09 Updating examples to 1.7
440 {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
441 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
442
8c6f1c94 »
2012-03-09 Updating examples to 1.7
443 /*create a new grid*/
444 var grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
445 id: 'grid',
446 store: store,
447 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
448 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
449
9dd52dc6 »
2011-11-20 mondo whitespace change
450 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
451 grid.placeAt("gridDiv");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
452
9dd52dc6 »
2011-11-20 mondo whitespace change
453 /*Call startup() to render the grid*/
454 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
455 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
456
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
457 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
458
9dd52dc6 »
2011-11-20 mondo whitespace change
459 <div id="gridDiv"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
460
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
461 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
462
76ae79b5 »
2013-07-06 Update DataGrid.rst
463 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
464
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
465 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
466 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
467 height: 20em;
468 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
469
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
473
9dd52dc6 »
2011-11-20 mondo whitespace change
474 Working with selections
475 -----------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
476
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
478
8c6f1c94 »
2012-03-09 Updating examples to 1.7
479
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
480 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
481 :djConfig: async: true, parseOnLoad: true
482
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
483 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
484
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
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){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
487 parser.parse();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
488 /*set up data store*/
489 var data = {
490 identifier: 'id',
491 items: []
492 };
493 var data_list = [
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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}
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
497 ];
498 var rows = 60;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
501 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
502 var store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
511
8c6f1c94 »
2012-03-09 Updating examples to 1.7
512 /*create a new grid*/
513 grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
514 id: 'grid',
515 store: store,
516 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
517 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
518
9dd52dc6 »
2011-11-20 mondo whitespace change
519 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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: */
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
530 array.forEach(items, function(selectedItem){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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: */
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
535 array.forEach(grid.store.getAttributes(selectedItem), function(attribute){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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 );
d608cc59 »
2011-11-20 \r\n -> \n conversion.
550
9dd52dc6 »
2011-11-20 mondo whitespace change
551 /*Call startup() to render the grid*/
552 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
553 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
554
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
555 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
556
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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>
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
566 <span data-dojo-id="button1">
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
567 get all Selected Items
568 </span>
569 </p>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
570
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
571 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
572
76ae79b5 »
2013-07-06 Update DataGrid.rst
573 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
574
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
575 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
576 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
577 height: 15em;
578 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
579
580
8c6f1c94 »
2012-03-09 Updating examples to 1.7
581
7aa5c1a0 »
2011-12-05 typos and American spelling
582 Grid 1.2 supports a new parameter "selectionMode" which allows you to control the behavior of the selection functionality:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
583
9dd52dc6 »
2011-11-20 mondo whitespace change
584 'none'
585 deactivates the selection functionality
586 'single'
587 let the user select only one item at the same time
588 'multiple'
33e0a745 »
2011-12-17 Minor singular vs. plural typo.
589 let the user select more than one item at the same time. First click selects an item, second deselects it
9dd52dc6 »
2011-11-20 mondo whitespace change
590 'extended' (default)
ff86d807 »
2011-12-16 More information on selections.
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
594
595
9dd52dc6 »
2011-11-20 mondo whitespace change
596 Editing data
597 ------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
598
9dd52dc6 »
2011-11-20 mondo whitespace change
599 Grid allows you to edit your data easily and send the changed values back to your server
d608cc59 »
2011-11-20 \r\n -> \n conversion.
600
9dd52dc6 »
2011-11-20 mondo whitespace change
601 First, you have to set a editor for each cell, you would like to edit:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
602
8c6f1c94 »
2012-03-09 Updating examples to 1.7
603
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
604 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
605 :djConfig: async: true, parseOnLoad: false
606
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
607 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
608
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
611 /*set up data store*/
612 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
613 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
624 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
625 var store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
634
8c6f1c94 »
2012-03-09 Updating examples to 1.7
635 /*create a new grid*/
636 var grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
637 id: 'grid',
638 store: store,
639 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
640 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
641
9dd52dc6 »
2011-11-20 mondo whitespace change
642 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
643 grid.placeAt("gridDiv");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
644
9dd52dc6 »
2011-11-20 mondo whitespace change
645 /*Call startup() to render the grid*/
646 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
647 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
648
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
649 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
650
9dd52dc6 »
2011-11-20 mondo whitespace change
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>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
654
655
9dd52dc6 »
2011-11-20 mondo whitespace change
656 <div id="gridDiv"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
657
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
658 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
659
76ae79b5 »
2013-07-06 Update DataGrid.rst
660 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
661
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
662 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
663 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
664 height: 20em;
665 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
666
667
9dd52dc6 »
2011-11-20 mondo whitespace change
668 Adding and Deleting data
669 ------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
670
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
673
8c6f1c94 »
2012-03-09 Updating examples to 1.7
674
675
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
676 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
677 :djConfig: async: true, parseOnLoad: false
678
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
679 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
680
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
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){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
683 parser.parse();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
684 /*set up data store*/
685 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
686 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
695 for(i = 0, l = data_list.length; i < rows; i++){
696 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
697 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
698 store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
707
8c6f1c94 »
2012-03-09 Updating examples to 1.7
708 /*create a new grid*/
709 grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
710 id: 'grid',
711 store: store,
712 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
713 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
714
9dd52dc6 »
2011-11-20 mondo whitespace change
715 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
716 grid.placeAt("gridDiv");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
717
8c6f1c94 »
2012-03-09 Updating examples to 1.7
718 /* attach an event handler */
719 on(button2,'click',
720 function(e){
9dd52dc6 »
2011-11-20 mondo whitespace change
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);
8c6f1c94 »
2012-03-09 Updating examples to 1.7
725 }
726 );
727 /* attach an event handler */
728 on(button1,'click',
729 function(e){
9dd52dc6 »
2011-11-20 mondo whitespace change
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: */
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
736 array.forEach(items, function(selectedItem){
67f7d9eb »
2011-12-01 Fix spacing for braces, function(), if(), while(), for(), else, etc. …
737 if(selectedItem !== null){
9dd52dc6 »
2011-11-20 mondo whitespace change
738 /* Delete the item from the data store: */
739 store.deleteItem(selectedItem);
740 } /* end if */
741 }); /* end forEach */
742 } /* end if */
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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>
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
760 <span data-dojo-id='button2'>
8c6f1c94 »
2012-03-09 Updating examples to 1.7
761 Add Row
762 </span>
763
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
764 <span data-dojo-id='button1'>
8c6f1c94 »
2012-03-09 Updating examples to 1.7
765 Remove Selected Rows
9dd52dc6 »
2011-11-20 mondo whitespace change
766 </span>
767 </p>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
768
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
769 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
770
76ae79b5 »
2013-07-06 Update DataGrid.rst
771 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
772
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
773 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
774 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
775 height: 15em;
776 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
777
778
9dd52dc6 »
2011-11-20 mondo whitespace change
779 Filtering data
780 --------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
781
9dd52dc6 »
2011-11-20 mondo whitespace change
782 The Grid offers a filter() method, to filter data from the current query (client-side filtering).
d608cc59 »
2011-11-20 \r\n -> \n conversion.
783
8c6f1c94 »
2012-03-09 Updating examples to 1.7
784
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
785 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
786 :djConfig: async: true, parseOnLoad: false
787
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
788 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
789
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
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){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
792 parser.parse();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
793 /*set up data store*/
794 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
795 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
806 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
807 var store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
816
8c6f1c94 »
2012-03-09 Updating examples to 1.7
817 /*create a new grid*/
818 grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
819 id: 'grid',
820 store: store,
821 structure: layout,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
822 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
823
9dd52dc6 »
2011-11-20 mondo whitespace change
824 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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 );
d608cc59 »
2011-11-20 \r\n -> \n conversion.
842
9dd52dc6 »
2011-11-20 mondo whitespace change
843 /*Call startup() to render the grid*/
844 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
845 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
846
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
847 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
848
9dd52dc6 »
2011-11-20 mondo whitespace change
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>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
853
9dd52dc6 »
2011-11-20 mondo whitespace change
854 <div id="gridDiv"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
855
9dd52dc6 »
2011-11-20 mondo whitespace change
856 <p>
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
857 <span data-dojo-id='button1'>
9dd52dc6 »
2011-11-20 mondo whitespace change
858 Filter
859 </span>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
860
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
861 <span data-dojo-id='button2'>
9dd52dc6 »
2011-11-20 mondo whitespace change
862 Show all
863 </span>
864 </p>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
865
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
866 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
867
76ae79b5 »
2013-07-06 Update DataGrid.rst
868 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
869
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
870 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
871 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
872 height: 15em;
873 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
874
875
8c6f1c94 »
2012-03-09 Updating examples to 1.7
876
9dd52dc6 »
2011-11-20 mondo whitespace change
877 Grid styling: Rows
878 ------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
879
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
882
8c6f1c94 »
2012-03-09 Updating examples to 1.7
883
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
884 .. code-example ::
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
885 :djConfig: async: true, parseOnLoad: false
886
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
887 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
888
8c6f1c94 »
2012-03-09 Updating examples to 1.7
889 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
890 function(lang, DataGrid, ItemFileWriteStore, dom){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
891 /*set up data store*/
892 var data = {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
893 identifier: "id",
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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;
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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]));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
904 }
8c6f1c94 »
2012-03-09 Updating examples to 1.7
905 var store = new ItemFileWriteStore({data: data});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ]];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
914
9dd52dc6 »
2011-11-20 mondo whitespace change
915 function myStyleRow(row){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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);
9dd52dc6 »
2011-11-20 mondo whitespace change
931 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
932
8c6f1c94 »
2012-03-09 Updating examples to 1.7
933 /*create a new grid*/
934 grid = new DataGrid({
9dd52dc6 »
2011-11-20 mondo whitespace change
935 id: 'grid',
936 store: store,
937 structure: layout,
938 onStyleRow: myStyleRow,
8c6f1c94 »
2012-03-09 Updating examples to 1.7
939 rowSelector: '20px'});
d608cc59 »
2011-11-20 \r\n -> \n conversion.
940
9dd52dc6 »
2011-11-20 mondo whitespace change
941 /*append the new grid to the div*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
942 grid.placeAt("gridDiv");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
943
9dd52dc6 »
2011-11-20 mondo whitespace change
944 /*Call startup() to render the grid*/
945 grid.startup();
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
946 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
947
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
948 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
949
9dd52dc6 »
2011-11-20 mondo whitespace change
950 <div id="gridDiv"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
951
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
952 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
953
76ae79b5 »
2013-07-06 Update DataGrid.rst
954 @import "{{dataUrl}}dojox/grid/resources/claroGrid.css";
8766c0e0 »
2013-07-05 Update DataGrid.rst
955
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
956 /*Grid needs an explicit height by default*/
dc34874f »
2012-11-15 Update dojox/grid/DataGrid.rst
957 #gridDiv {
9dd52dc6 »
2011-11-20 mondo whitespace change
958 height: 20em;
959 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
960
961
8c6f1c94 »
2012-03-09 Updating examples to 1.7
962
9dd52dc6 »
2011-11-20 mondo whitespace change
963 Formatting a Date Field
964 -----------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
965
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
967
8c6f1c94 »
2012-03-09 Updating examples to 1.7
968
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
969 .. code-example ::
9dd52dc6 »
2011-11-20 mondo whitespace change
970 :width: 400
971 :height: 300
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
972 :djConfig: async: true, parseOnLoad: false
d608cc59 »
2011-11-20 \r\n -> \n conversion.
973
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
974 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
975
8c6f1c94 »
2012-03-09 Updating examples to 1.7
976 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
977 function(DataGrid, ItemFileReadStore, stamp, locale){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
978 function formatDate(datum){
979 /* Format the value in store, so as to be displayed.*/
8c6f1c94 »
2012-03-09 Updating examples to 1.7
980 var d = stamp.fromISOString(datum);
981 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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
8c6f1c94 »
2012-03-09 Updating examples to 1.7
991 var store = new ItemFileReadStore({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 });
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1003 var grid = DataGrid({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1004 id: 'grid',
1005 store: store,
1006 structure: layout,
1007 autoWidth: true,
1008 autoHeight: true
1009 });
1010 grid.placeAt('gridContainer');
1011 grid.startup();
1012 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1013
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1014 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1015
9dd52dc6 »
2011-11-20 mondo whitespace change
1016 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1017
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1018 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1019
8766c0e0 »
2013-07-05 Update DataGrid.rst
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" >
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1023
1024
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1025
9dd52dc6 »
2011-11-20 mondo whitespace change
1026 Editable Date Field
1027 -------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1028
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1031
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1032
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1033 .. code-example ::
9dd52dc6 »
2011-11-20 mondo whitespace change
1034 :width: 400
1035 :height: 300
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
1036 :djConfig: async: true, parseOnLoad: false
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1037
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1038 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1039
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1040 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
1041 function(DataGrid, ItemFileWriteStore, stamp, locale){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1042 function formatDate(datum){
1043 /* Format the value in store, so as to be displayed.*/
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1044 var d = stamp.fromISOString(datum);
1045 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ];
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1055 var store = new ItemFileWriteStore({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1056 data: {
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1057 identifier: 'id',
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 });
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1067 var grid = new DataGrid({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1068 id: 'grid',
1069 store: store,
1070 structure: layout
1071 });
1072 grid.placeAt('gridContainer');
1073 grid.startup();
1074 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1075
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1076 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1077
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1078 <div id='gridContainer' style='width: 100%; height: 200px;'></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1079
1f9b928d »
2011-11-21 bulk deprecated removal and normalization
1080 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1081
8766c0e0 »
2013-07-05 Update DataGrid.rst
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" >
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1085
1086
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1087
9dd52dc6 »
2011-11-20 mondo whitespace change
1088 Using a dijit widget to edit a Date Field
1089 -----------------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1090
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1092
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1093
9dd52dc6 »
2011-11-20 mondo whitespace change
1094 .. code-example::
1095 :width: 400
1096 :height: 300
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
1097 :djConfig: async: true, parseOnLoad: false
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1098
4cccd8ac »
2011-12-20 .. javascript --> .. js
1099 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1100
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1103 function formatDate(datum){
1104 /*Format the value in store, so as to be displayed.*/
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1105 var d = stamp.fromISOString(datum);
1106 return locale.format(d, {selector: 'date', formatLength: 'long'});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1107 }
1108
1109 function getDateValue(){
1110 /*Override the default getValue function for dojox.grid.cells.DateTextBox*/
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1111 return stamp.toISOString(this.widget.get('value'));
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ];
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1124 var store = new ItemFileWriteStore({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1144
c15cbf24 »
2011-12-20 standardize spacing on directives like .. js
1145 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1146
9dd52dc6 »
2011-11-20 mondo whitespace change
1147 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1148
c15cbf24 »
2011-12-20 standardize spacing on directives like .. js
1149 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1150
8766c0e0 »
2013-07-05 Update DataGrid.rst
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" >
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1154
1155
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1156
9dd52dc6 »
2011-11-20 mondo whitespace change
1157 Using a dijit widget to edit a Date Field - with custom patterns
1158 ----------------------------------------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1159
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1161
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1162
9dd52dc6 »
2011-11-20 mondo whitespace change
1163 .. code-example::
1164 :width: 400
1165 :height: 300
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
1166 :djConfig: async: true, parseOnLoad: false
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1167
4cccd8ac »
2011-12-20 .. javascript --> .. js
1168 .. js ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1169
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
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){
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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.*/
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1177 var d = locale.parse(datum, {selector: 'date', datePattern: storePattern});
1178 return locale.format(d, {selector: 'date', datePattern: displayPattern});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1179 }
1180
1181 function getDateValue(){
1182 /*Override the default getValue function for dojox.grid.cells.DateTextBox*/
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1183 return locale.format(this.widget.get('value'), {selector: 'date', datePattern: storePattern});
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 ];
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1196 var store = new ItemFileWriteStore({
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
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 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1217
c15cbf24 »
2011-12-20 standardize spacing on directives like .. js
1218 .. html ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1219
9dd52dc6 »
2011-11-20 mondo whitespace change
1220 <div id="gridContainer" style="width: 100%; height: 200px;"></div>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1221
c15cbf24 »
2011-12-20 standardize spacing on directives like .. js
1222 .. css ::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1223
8766c0e0 »
2013-07-05 Update DataGrid.rst
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" >
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1227
1228
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1229 _`Inserting a dijit widget (Button) in a field`
1230 ----------------------------------------------------------------
1231
1232 .. code-example ::
1233 :width: 400
1234 :height: 300
3073895d »
2012-06-05 Set djConfig async: true and parseOnLoad: false
1235 :djConfig: async: true, parseOnLoad: false
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1236
1237 .. js ::
1238
1239 require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dijit/form/Button', 'dojo/domReady!'],
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1240 function(DataGrid, ItemFileReadStore, stamp, locale, Button){
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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
8766c0e0 »
2013-07-05 Update DataGrid.rst
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" >
8c6f1c94 »
2012-03-09 Updating examples to 1.7
1298
1299
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1300
1301
9dd52dc6 »
2011-11-20 mondo whitespace change
1302 Tips
1303 ====
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1304
9dd52dc6 »
2011-11-20 mondo whitespace change
1305 Creating a grid in a node with display: none
1306 --------------------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1307
9dd52dc6 »
2011-11-20 mondo whitespace change
1308 It is not possible to create a grid as a child of a node which is set to be not displayed (display: none).
40dc7a99 »
2011-11-23 dojox/ spelling
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
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1310
9dd52dc6 »
2011-11-20 mondo whitespace change
1311 Hiding the Headers of a Grid
1312 ----------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1313
9dd52dc6 »
2011-11-20 mondo whitespace change
1314 You can hide the columns of a Grid by using normal css:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1315
c49c87d5 »
2011-11-21 normalization
1316 .. html ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
1317
9dd52dc6 »
2011-11-20 mondo whitespace change
1318 .dojoxGrid-header { display:none; }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1319
1320
9dd52dc6 »
2011-11-20 mondo whitespace change
1321 Refreshing the content of a grid
1322 --------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1323
9dd52dc6 »
2011-11-20 mondo whitespace change
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:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1325
c49c87d5 »
2011-11-21 normalization
1326 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
1327
8c6f1c94 »
2012-03-09 Updating examples to 1.7
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 };
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1335
1336
9dd52dc6 »
2011-11-20 mondo whitespace change
1337 Layout multiple views by percentage
1338 -----------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1339
9dd52dc6 »
2011-11-20 mondo whitespace change
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.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1341
c49c87d5 »
2011-11-21 normalization
1342 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
1343
9dd52dc6 »
2011-11-20 mondo whitespace change
1344 var layout = [
c08f00e4 »
2011-12-01 normalize comment format, putting space after //
1345 {width: '80%', // 1st view
9dd52dc6 »
2011-11-20 mondo whitespace change
1346 cells: [{name: 'Column 1', field: 'col1', width: "60%"}, {name: 'Column 2', field: 'col2', width: "40%"}]},
c08f00e4 »
2011-12-01 normalize comment format, putting space after //
1347 {width: '20%', // 2nd view
9dd52dc6 »
2011-11-20 mondo whitespace change
1348 cells: [{name: 'Column 3', field: 'col3'}]}
1349 ];
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1350
1351
9dd52dc6 »
2011-11-20 mondo whitespace change
1352 Keep row selection
1353 ------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1354
9dd52dc6 »
2011-11-20 mondo whitespace change
1355 Keeping row selection across various actions e.g. sorting, filtering is a known limitation of Grid especially when used with a server side store, as items are emptied and newly fetch after sorting, and Grid is unconscious of the mapping between selected row index and the new items.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1356
9dd52dc6 »
2011-11-20 mondo whitespace change
1357 However, in Dojo 1.7, a new attribute named 'keepSelection' is added trying to make it work under some scenario, the 'keepSelection' attr can be applied to any Grid types including DataGrid, EnhancedGrid, TreeGrid or LazyTreeGrid e.g
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1358
df581358 »
2012-05-19 Add a tip that an explicit resize() might be needed when grid is put …
1359 .. js ::
ffa767cf »
2011-11-21 removing :linenos: rather than reverting previous commit. revert both…
1360
444bdc28 »
2012-03-09 Updating examples to Dojo 1.7
1361 require(['dojox/grid/DataGrid', 'dojox/grid/EnhancedGrid', 'dojox/grid/TreeGrid', 'dojox/grid/LazyTreeGrid', 'dojo/domReady!'],
1362 function(DataGrid, EnhancedGrid, TreeGrid, LazyTreeGrid) {
1363 var grid = new DataGrid({keepSelection: true}, div);
1364
1365 var grid = new EnhancedGrid({keepSelection: true}, div);
1366
1367 var grid = new TreeGrid({keepSelection: true}, div);
1368
1369 var grid = new LazyTreeGrid({keepSelection: true}, div);
1370 }
1371 );
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1372
1373
9dd52dc6 »
2011-11-20 mondo whitespace change
1374 But please note:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1375
9dd52dc6 »
2011-11-20 mondo whitespace change
1376 1. Key precondition - Store Identifier(id) is required since id is the only way to differentiate datastore items.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1377
9dd52dc6 »
2011-11-20 mondo whitespace change
1378 2. Known issue - it might not be accurate if some unloaded rows are selected by range(e.g.SHIFT + click)
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1379
1380
df581358 »
2012-05-19 Add a tip that an explicit resize() might be needed when grid is put …
1381 Display grid from a hidden container
1382 ------------------------------------
1383
676a21c8 »
2012-05-19 trivial wording fix for Tip.Display grid from a hidden container
1384 There are some occasions when grid is created within a hidden container e.g. Dialogue or TabContainer, an explicit resize() would be needed to let grid calculate its size appropriately
df581358 »
2012-05-19 Add a tip that an explicit resize() might be needed when grid is put …
1385
1386 .. js ::
1387
1388 grid.resize();
1389
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1390
91fd04b9 »
2012-06-18 Tips to add summary attribute for grid
1391 Add summary attribute
1392 ---------------------
1393
1394 Adding a summary attribute to grid is feasible in Dojo 1.8+
1395
1396 .. js ::
1397
1398 var grid = new DataGrid({
1399 store: store,
a51fb92b »
2012-11-15 Update dojox/grid/DataGrid.rst
1400 structure: layout,
91fd04b9 »
2012-06-18 Tips to add summary attribute for grid
1401 summary: "A customized grid summary"
1402 });
1403
1404 or
1405
1406 .. html ::
1407
81831412 »
2012-06-18 Update tips - summary attribute
1408 <div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="summary: 'A customized grid summary'"></div>
91fd04b9 »
2012-06-18 Tips to add summary attribute for grid
1409
1410
1411
9dd52dc6 »
2011-11-20 mondo whitespace change
1412 Accessibility in 1.3 and Beyond
1413 ===============================
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1414
9dd52dc6 »
2011-11-20 mondo whitespace change
1415 Keyboard
1416 --------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1417
3171d1e2 »
2011-11-28 fix tables
1418 ============================================== ===============================================
1419 Action Key
9dd52dc6 »
2011-11-20 mondo whitespace change
1420 ============================================== ===============================================
54a2d640 »
2011-12-20 fix formatting and unneeded <script>/<style> tags
1421 Navigate into the grid The column header section and the data section are two separate tab stops in the grid. Press tab to put focus into the column header. With focus on a column header, press tab to set focus into the data portion of the grid. Focus will go to the data cell which last had focus in the grid or to the first data cell if focus had not been previously set into the grid in this session.
1422 Navigate between column headers With focus on a column header, use the left and right arrow keys to move between column headers.
1423 Navigate between data cells With focus on a data cell, use the left, right, up, down, pageup and pagedown arrow keys to move between data cells. The grid may load additional content as it is scrolled which may result in a delay. Focus should appear on the appropriate cell once the data has completed loading.
1424 Sort a column With focus on a column header press the enter key to sort the column. Focus remains in the column header after the sort.
1425 Edit a cell If the cell is editable, pressing enter with focus on the cell will put it into edit mode.
1426 Cancel edit mode When a cell is being edited, pressing escape will cancel edit mode.
1427 End edit mode When a cell is being edited, pressing enter will accept the change and end edit mode.
1428 Focus editable cells With focus on an editable cell, pressing tab will move focus to the next editable cell in editing mode. Pressing shift-tab will move focus to the previous editable cell in editing mode. Note there are still some issues when traversing row boundaries.
1429 Invoke an onrowclick event If the grid row has an onrowclick event, it can be invoked by pressing enter with focus on a cell in the row.
1430 Select a row With focus on a cell in a row, press the space bar.
1431 Select contiguous rows Select a row, hold down the shift key and arrow up or down to a new row, press the space bar to select the rows between the original row and the new row.
1432 Select discontinuous rows Select a row, hold down the control key and use the arrow keys to navigate to a new row, continue holding the control key and press the space bar to add the new row to the selection.
9dd52dc6 »
2011-11-20 mondo whitespace change
1433 Change column size (1.4) Set focus to a column header, hold shift+control and press the left or right arrow key so change the column size.
1434 ============================================== ===============================================
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1435
9dd52dc6 »
2011-11-20 mondo whitespace change
1436 Known Issues
1437 ------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1438
9dd52dc6 »
2011-11-20 mondo whitespace change
1439 The basic DataGrid is accessible however, some advanced features are not.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1440
9dd52dc6 »
2011-11-20 mondo whitespace change
1441 Keyboard
1442 ~~~~~~~~
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1443
9dd52dc6 »
2011-11-20 mondo whitespace change
1444 * There is no keyboard mechanism to change column size in 1.3. This was added in 1.4.
40dc7a99 »
2011-11-23 dojox/ spelling
1445 * Keyboard navigation does NOT skip hidden columns in 1.3. This was fixed in 1.4. Hidden columns are now skipped when arrowing through the column headers and data.
1446 * There is no keyboard support for drag and drop. If you rely on drag and drop to reorder columns, you must provide an alternative keyboard mechanism (dialog box, context menu, etc.) to perform the same function.
9dd52dc6 »
2011-11-20 mondo whitespace change
1447 * Tree Grids are not supported for Accessibility.
1448 * Developers who add additional features via scripting, such as hidden rows, are responsible for the accessibility of the added feature(s).
1449 * Invoking links within cells via the keyboard is not supported.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1450
9dd52dc6 »
2011-11-20 mondo whitespace change
1451 Screen Reader
1452 ~~~~~~~~~~~~~
1453 The DojoX DataGrid is a complicated widget created via Scripting. It has been enabled with `WAI-ARIA <http://www.w3.org/WAI/intro/aria>`_ properties, but unfortunately the current browsers (Firefox 3.5+ and IE 8) and screen readers (JAWS 11) do not fully support all of those properties. Thus, information about the grid readonly, row selection and column sort status are not spoken by the screen reader. There is still additional work on the part of the screen reader for information about row and column headers to be correctly spoken as the user traverses the data cells. Better support is expected in future versions of the browsers and screen readers and the Dojox DataGrid will be updated, as necessary, to take advantage of the additional ARIA support.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1454
1455
9dd52dc6 »
2011-11-20 mondo whitespace change
1456 See also
1457 ========
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1458
9dd52dc6 »
2011-11-20 mondo whitespace change
1459 * :ref:`dojox.grid.EnhancedGrid <dojox/grid/EnhancedGrid>`
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1460
9dd52dc6 »
2011-11-20 mondo whitespace change
1461 An enhanced version of the base grid, which extends it in numerous useful ways
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1462
9dd52dc6 »
2011-11-20 mondo whitespace change
1463 * :ref:`dojox.grid.TreeGrid <dojox/grid/TreeGrid>`
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1464
40dc7a99 »
2011-11-23 dojox/ spelling
1465 This grid offers support for collapsible rows and model-based (:ref:`dijit.tree.ForestStoreModel <dijit/tree/ForestStoreModel>`) structure
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1466
9dd52dc6 »
2011-11-20 mondo whitespace change
1467 * :ref:`dojox.grid.LazyTreeGrid <dojox/grid/LazyTreeGrid>`
d608cc59 »
2011-11-20 \r\n -> \n conversion.
1468
9dd52dc6 »
2011-11-20 mondo whitespace change
1469 An extended version of TreeGrid that can lazy load and virtual scroll nested levels of huge children rows.
d608cc59 »
2011-11-20 \r\n -> \n conversion.