Basic Dojox Grid Example

This fiddle shows the basics of adding and removing data from a dojox DataGrid

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
    <table id="myDataGrid" dojoType="dojox.grid.DataGrid" style="width:400px;">
        <thead>
        <tr><th field="planet" width="33%">Planet</th>
            <th field="alienPop" width="33%">Aliens</th>
            <th field="humanPop" width="33%">Humans</th>
        </tr>
        </thead>
    </table>
    
<p>    

<button id="addToZoron" dojoType="dijit.form.Button">Add people to zoron</button>
<button id="deleteGaxula" dojoType="dijit.form.Button">Delete Gaxula</button>
<button id="addEndron" dojoType="dijit.form.Button">Add Endron</button>
    
</p>

<div id="info"></div>

JavaScript

dojo.require('dojox.grid.DataGrid');
dojo.require('dojo.data.ItemFileWriteStore');
dojo.require('dijit.form.Button');

dojo.addOnLoad(function() {
    var grid = dijit.byId('myDataGrid');
    var addToZoron = dijit.byId('addToZoron');
    var deleteGaxula = dijit.byId('deleteGaxula');
    var addEndron = dijit.byId('addEndron');
    
    var itemList = [
        {alienPop: 320000,humanPop: 56000,planet: 'Zoron'},
        {alienPop: 980940,humanPop: 56052,planet: 'Gaxula'},
        {alienPop: 200,humanPop: 500,planet: 'Reiutsink'},
        ];

    var store = new dojo.data.ItemFileWriteStore({
        data: {
            identifier : 'planet',
            
            items: itemList
        }
    });

    
    grid.setStore(store);
    
    if(store === grid.store) { 
       dojo.place('<p>store and grid.store reference the exact same object</p>', 'info', 'first');
    }
       
    var modifyPlanet = function modifyPlanet() {       
        store.fetch({query : {planet : 'Zoron'},
             onItem : function (item ) {
                  var humans = store.getValue(item, 'humanPop');
                  humans += 200;
                  store.setValue(item, 'humanPop', humans);
                     
              }
        });
    }
        
   var deletePlanet = function deletePlanet() {
        store.fetchItemByIdentity({ 'identity' : 'Gaxula',  onItem :  function (item ) {
        if(item == null) {
             dojo.place ('<p>You already deleted Gaxula, the idendifier could not be found so onItem was called with null which means the item does not exist. This only works when you call fetchItemByIdentity </p>', 'info', 'first')
        } else {
            store.deleteItem(item);
        }
        }});
   }
        
   var addPlanet = function() {
        try {
        store.newItem({planet: 'Endron', humanPop : 40000, alienPop : 9000}); } catch (e) { dojo.place ('<p>You already added Endron, and since the identifier in the store is set to planet, each planet...