CODEWITHSUNDEEP
javascripthtmldatagriddojo
yeeen
yeeen

Reputation: 4945

Unable to save to store in Dojo

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.

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?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

  <head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

    <style type="text/css">
      body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <style type="text/css">
        .dojoxGrid table { margin: 0; } 
        html, body { width: 100%; height: 100%; margin: 0; }
    </style>

    <script type="text/javascript">
    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.");
    }
  </script>

  </head>



  <body class=" tundra">
    <button id="btnAdd" type="button"></button>
    <button id="btnRemove" type="button"></button>
    <button id="btnSave" type="button"></button>
    <br />
    <div id="gridContainer" style="width: 100%; height: 100%;"></div>
  </body>


</html>

The source code is also here: http://jsfiddle.net/cDCWk/

Upvotes: 3

Views: 1368

Answers (1)

Kitson
Kitson

Reputation: 1678

You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.

I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/

Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.

Upvotes: 2

Related Questions