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

From PMISwiki
Jump to: navigation, search

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:

....
var grid3;
var phonelist_url = 'data/phone_action.php?request=selectData';
var newItem = { id:  '',
              first: 'Enter first name..',
              last:  'Enter last name..',
              phone: 'Enter phone..'
};
 
dojo.ready(function(){
 
      store3 = new dojo.data.ItemFileWriteStore({
		url: phonelist_url
              //  No save function has been implemented yet
      });
 
      store3.deleteById = function(id){
             this.fetchItemByIdentity({identity: id, onItem: function(item){
                 store3.deleteItem(item);
                 //store3.save();
             }});
      };		
 
      var datagrid_structure = [
	   { name: "Id", field: "id", width: "30px", 
                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, 
                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',
                formatter: function(id, rowIdx, cell){
                  if(!id){
                    return "<em>unsaved</em>";
                  }
                  var delete_action = "store3.deleteById('"+id+"'); return true;";
                  return '<button onclick="' + delete_action + '">Delete</button>';
                }
            }           
            ];
 
	var grid5 = new dojox.grid.DataGrid({
		  name: 'data_store3',
	          store: store3,
		  query: { first: "*" },
		  structure: datagrid_structure,
                  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");
	// Since dojo.parse was called at page startup (parseOnLoad:true) we need to call grid.startup to render the grid 
	grid5.startup();
 
    }); //dojo.ready(function()  
 
    ...

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

{"identifier":"id",
   "items":[{"id":"1","first":"John","last":"Taylor","phone":"1458456478","selected":"0"},  
            {"id":"2","first":"Antonio","last":"Mogensen","phone":"4725454568","selected":"0"},
            {"id":"3","first":"Peter Stig","last":"Andersen","phone":"4544699969","selected":"0"}]
}

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.

....
      function cellClickDataGrid (e) {
            /* the 4th cell has the link to the Delete text*/
            if (e.cellIndex == 4){
                var selItem = e.grid.getItem(e.rowIndex);
                dijit.byId(gridNode).store.deleteItem(selItem);
            }
      }
      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>";
           }
           return '<div style="text-align: center;">Delete</div>';
      } 
 
....

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.

    dojo.ready( function() {
          dojo.connect(gridNode, "onCellClick", cellClickDataGrid);
    });

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