title: Unable to save to store in Dojo
body: <p>I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.</p>
  
  <p>When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html dir="ltr"&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /&gt;
       &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" /&gt;
       &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
      &lt;/style&gt;
      &lt;style type="text/css"&gt;
          .dojoxGrid table { margin: 0; } 
          html, body { width: 100%; height: 100%; margin: 0; }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("dijit.form.Button");
  
      dojo.addOnLoad(function() {
          // our test data store for this example:
          var store = new dojo.data.ItemFileWriteStore({
            //url: 'players.json'
              data: {
                label: 'pId',
                items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
                  {"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
                  {"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
                  {"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
                  {"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
                  {"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
                  {"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
                  {"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
                  {"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
                  {"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
          });
  
          // set the layout structure:
          var layout = [{
            field: 'Player',
            name: 'Player',
            width: '200px',
            styles:"text-align:center;"
          },
          {
            field: 'Games',
            name: 'Games Played',
            width: '50px',
            styles:"text-align:center;"
          },
          {
            field: 'Points',
            name: 'Points',
            width: '50px',
            styles:"text-align:center;"
          },
          {
            field: 'PPG',
            name: 'Points Per Game',
            width: '50px',
            styles:"text-align:center;"
          }];
  
          // create a new grid:
          var grid = new dojox.grid.DataGrid({
            query: {
                Player: '*'
            },
            store: store,
            clientSort: true,
            rowSelector: '20px',
            structure: layout
          },
          document.createElement('div'));
  
          // append the new grid to the div "gridContainer":
          dojo.byId("gridContainer").appendChild(grid.domNode);
  
          // Call startup, in order to render the grid:
          grid.startup();
          //dojo.forEach(grid.structure, function(itemData, index, list){
              //itemData.editable = true;
          //});
          var btnAdd = new dijit.form.Button({
              label: "Add",
              onClick: function(){
                  grid.store.newItem({
                      Player: "Someone", 
                      Games: "1000", 
                      Points: "1000", 
                      PPG: "1.0"
                  });
              }
          }, "btnAdd");
          var btnRemove = new dijit.form.Button({
              label: "Remove",
              onClick: function(){
                  var items = grid.selection.getSelected();
                  if(items.length){
                      dojo.forEach(items, function(selectedItem){
                          if(selectedItem !== null){
                              grid.store.deleteItem(selectedItem);
                          }
                      });
                  } 
              }
          }, "btnRemove");
          var btnSave = new dijit.form.Button({
              label: "Save",
              onClick: function(){    
                  grid.store.save({onComplete: saveDone, onError: saveFailed});
              }
          }, "btnSave");
      });
  
      function saveDone(){
        alert("Done saving.");
      }
      function saveFailed(){
        alert("Save failed.");
      }
    &lt;/script&gt;
  
    &lt;/head&gt;
  
  
  
    &lt;body class=" tundra"&gt;
      &lt;button id="btnAdd" type="button"&gt;&lt;/button&gt;
      &lt;button id="btnRemove" type="button"&gt;&lt;/button&gt;
      &lt;button id="btnSave" type="button"&gt;&lt;/button&gt;
      &lt;br /&gt;
      &lt;div id="gridContainer" style="width: 100%; height: 100%;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The source code is also here: <a href="http://jsfiddle.net/cDCWk/" rel="nofollow noreferrer">http://jsfiddle.net/cDCWk/</a></p>