Dojo Dijit and HTML5 in Real world applications/Dojox/dojox.grid.DataGrid: Difference between revisions

From PMISwiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 9: Line 9:
The cells may be styled by the dojox.grid.DataGrid function <b>formatter</b>. In this page 3 different type of functions are shown:
The cells may be styled by the dojox.grid.DataGrid function <b>formatter</b>. In this page 3 different type of functions are shown:
* Text-align of the id column.
* 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!
* 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.
* Delete button will only be shown after the record has been saved.


Line 15: Line 15:
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
....
....
    var phonelist_url = 'data/phone_action.php?request=selectData';
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() 


     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");
...
</syntaxhighlight>
</syntaxhighlight>
[http://pmis.biz/rwa/dojox.grid.DataGrid_4.php Working example of Programmatic implementation]
[http://pmis.biz/rwa/dojox.grid.DataGrid_4.php 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
<syntaxhighlight lang="JavaScript">
{"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"}]
}
</syntaxhighlight>


===HTML5 Declarative===
===HTML5 Declarative===
Line 72: Line 106:


The cells may be styled by the dojox.grid.DataGrid function <b>formatter</b>. In this page 3 different type of functions are shown:
The cells may be styled by the dojox.grid.DataGrid function <b>formatter</b>. In this page 3 different type of functions are shown:
* Text-align of the id column
* 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!
* 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.
* 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 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.
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.  
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
....
....
      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){
       function format_center (id, rowIdx, cell){
                          return '<div style="text-align: center;">'+id+'</div>';
            return '<div style="text-align: center;">'+id+'</div>';
       }
       }
        
        
       function format_digits_only(ph, rowIdx, cell){
       function format_digits_only(ph, rowIdx, cell){
                // Check if string is digits only.
            // Check if string is digits only.
                var reg = new RegExp('^[0-9]{1,12}$');  
            var reg = new RegExp('^[0-9]{1,12}$');  
                    if ( reg.test(ph) ){
            if ( reg.test(ph) ){
                          return ph;
                return ph;
                          } else {
            } else {
                          return '<div style="color:#ff0000;">'+ph+'</div>';
                return '<div style="color:#ff0000;">'+ph+'</div>';
                          }
            }
       }
       }
       function format_delete_button (id, rowIdx, cell){
       function format_delete_button (id, rowIdx, cell){
                    if(!id){
          if(!id){
                      return "<em>unsaved</em>";
                return "<em>unsaved</em>";
                    }
          }
                    var delete_action = "store3.deleteItem('"+id+"'); return true;";
          return '<div style="text-align: center;">Delete</div>';
                    return '<button onclick="' + delete_action + '">Delete</button>';
       }  
       }  
....
....
</syntaxhighlight>
</syntaxhighlight>
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.
<syntaxhighlight lang="JavaScript">
    dojo.ready( function() {
          dojo.connect(gridNode, "onCellClick", cellClickDataGrid);
    });
</syntaxhighlight> 
HTML5 Declarative implementation of the formatter function in dojox.grid.DataGrid
HTML5 Declarative implementation of the formatter function in dojox.grid.DataGrid
<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
Line 139: Line 189:
[[Category:Dojox]]
[[Category:Dojox]]
[[Category:dojox.grid.DataGrid]]
[[Category:dojox.grid.DataGrid]]
[[Category:dojo.data.ItemFileWriteStore]]
[[Category:dojo.connect]]
[[Category:JSON]]

Latest revision as of 01:44, 16 November 2011

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