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 char is entered the cell font colour change to red!
• Delete button will only be shown after the record has been saved.

Programmatic implementation:

....
    var phonelist_url = 'data/phone_action.php?request=selectData';

    function establish_grid (){
	store3 = new dojo.data.ItemFileWriteStore({ url: phonelist_url });
	grid = new dojox.grid.DataGrid({
	    store: store3,
	    query: { first: "*" },
	    structure:  [
		{ name: "Id", field: "id", width: "30px",
                    //Text-align of the id column 
                    formatter:function(id, rowIdx, cell){
                        return '<div style="text-align: center;">'+id+'</div>';
                    }             
                },
		{ name: "First Name", field: "first", width: "100px", editable:true },
		{ name: "Last Name", field: "last", width: "100px", editable:true },
		{ name: "Phone Number", field: "phone", width: "90px", editable:true,
                    //Input validation of the phone number. If not digit char is entered then font colour change to red!    
                    formatter:function(ph, rowIdx, cell){
                        // Check if string is digits only.
                        var reg = new RegExp('^[0-9]{1,12}$'); 
                        if ( reg.test(ph) ){
                                return ph;
                            } else {
                                return '<div style="color:#ff0000;">'+ph+'</div>';
                        }
                    }
                 },
		{ name: 'Actions', field: 'id',
                    //Delete button will only be shown after the record has been saved. 
                    formatter: function(id, rowIdx, cell){
                        if(!id){
                            return "<em>unsaved</em>";
                        }
                        var delete_action = "store3.deleteItem('"+id+"'); return true;";
                        return '<button onclick="' + delete_action + '">Delete</button>';
                    }
                 }
            ],
            rowsperpage:'5', 
            rowSelector:true,
            columnreordering:'true',
            selectionMode:  'single',
            loadingMessage: 'loadingMessage: Get data from server..',
            errorMessage:   'Oops we could not retrive the requested data!',
            onFetchError: function(error,ioargs){console.log('Error ocured: '+error+' ioargs: '+ioargs); return true;},
        }, "grid5");
...

Working example of Programmatic implementation

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 column
• Input validation of the phone number (RegExp: only digits is alowed). If other char is entered the cell font color change to red!
• Delete button 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 are the same as in the Programmatic implementation above.

....
      function format_center (id, rowIdx, cell){
                          return '<div style="text-align: center;">'+id+'</div>';
      }
      
      function format_digits_only(ph, rowIdx, cell){
                // Check if string is digits only.
                var reg = new RegExp('^[0-9]{1,12}$'); 
                    if ( reg.test(ph) ){
                          return ph;
                          } else {
                          return '<div style="color:#ff0000;">'+ph+'</div>';
                          }
      }
      function format_delete_button (id, rowIdx, cell){
                    if(!id){
                      return "<em>unsaved</em>";
                    }
                    var delete_action = "store3.deleteItem('"+id+"'); return true;";
                    return '<button onclick="' + delete_action + '">Delete</button>';
      } 
....

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

<table id="gridNode" data-dojo-id="gridNode" 
                     data-dojo-type="dojox.grid.DataGrid" 
                     data-dojo-props=" query:{ first: '*' },
                                       store: new dojo.data.ItemFileWriteStore({ url: 'data/phone_action.php?request=selectData' }),
                                       rowsperpage:5,
                                       rowSelector:true,
                                       columnreordering:'true'
                                       ">
<thead>
<tr>
<th field="id"    width="20px"  formatter="format_center">Id</th>
<th field="first" width="100px" editable="true">First Name</th>
<th field="last"  width="100px" editable="true">Last Name</th>
<th field="phone" width="90px"  editable="true" formatter="format_digits_only"> Phone Number</th>
<th field="id"    width="90px"  formatter="format_delete_button">Action</th>
</tr>
</thead>
</table>

Working example of Declarative implementation

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

pmis.biz: Working example of Declarative implementation pmis.biz: Working example of Programmatic implementation