Dojo Dijit and HTML5 in Real world applications/Dojox/dojox.grid.DataGrid

dojox.grid.DataGrid
The DataGrid can be used either Programmatic or Declarative.

How to use formatter for styling and functionality selection
Below you will find example on styling of dojox.grid.Datagrid. We demonstrate an easy way to style the columns of the grid. The use of the formatter function are explained in a Programmatic and a HTML5 Declarative example.

Programmatic
The cells may be styled by the dojox.grid.DataGrid function formatter. In this page 3 different type of functions are shown:
 * Text-align of the id column.
 * Input validation of the phone number (RegExp: only digits is allowed). If other characters are entered the cell font colour change to red!
 * Delete button will only be shown after the record has been saved.

Programmatic implementation: Working example of Programmatic implementation

Note: The above use of the dojo.data.ItemFileWriteStore.fetchItemByIdentity method only work if a identifier has been defined in the json data. See below.

JSON data

HTML5 Declarative
Advanced implementation of the dojox.grid.DataGrid is preferably carried out in Programmatic implementation. However, in order to be able to compare the different type of implementations the same functionality has been implement in Declarative HTML5. This page demonstrate the use of: dojox.grid.DataGrid and shows an easy way to style the columns of the grid.

The cells may be styled by the dojox.grid.DataGrid function formatter. In this page 3 different type of functions are shown:
 * Text-align of the id and action columns
 * Input validation of the phone number (RegExp: only digits is alowed). If other char is entered the cell font color change to red!
 * Delete text will only be shown after the record has been saved.

The formatter functions must have been defined in the javascript section before it may be used in the html.

The 3 functions have the same functionality as in the Programmatic implementation above. However, here implemented as functions to make et more readable. In real applications object oriented implementation is fare better. Note: That in this example we use dojo.connect to listen for mouse clicks in the grid. If a mouse click is received the the function cellClickDataGrid is called. See above.

HTML5 Declarative implementation of the formatter function in dojox.grid.DataGrid

Working example of Declarative implementation

Verified in
IE 8, Firefox 3.6.22, Dojo 1.6.1