Skip to content

HTTPS clone URL

Subversion checkout URL

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