title: Implementing DoJo enhanced Grid with Json
body: <p>I have been trying to implement DoJo Enhanced Grid with Json and I have not been successful thus far.</p>
  
  <p>This is what I have done so far;</p>
  
  <pre><code> &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
   &lt;div xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" xmlns:spring="http://www.springframework.org/tags" version="2.0"&gt;
  &lt;jsp:output omit-xml-declaration="yes"/&gt;
  &lt;spring:url value="/students/listdata" var="mydatasource"/&gt;
  
  &lt;script type="text/javascript"&gt;
      dojo.require("dojo.parser");
      dojo.require("dojox.grid.EnhancedGrid");
      dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
      dojo.require("dijit.form.Button");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.addOnLoad(function() {
          dojo.parser.parse();
          loadGrid(dataGrid);
      });
  
      function loadGrid(dataGrid) {
          dojo.xhrGet({
              url: "${mydatasource}",
              load: function(data, ioArgs) {
                  dataGrid.setStore(
                          new dojo.data.ItemFileReadStore(
                              {data: {items : data}})
                  );
              },
              error: function(error) {
                  console.log("loading of grid data failed. Exception...", error);
              }
          });
      }
  &lt;/script&gt;
  &lt;util:panel id="titlePane" title="Course List"&gt;
      &lt;div id="addButton" dojoType="dijit.form.Button"&gt;
          Add
      &lt;/div&gt;
      &lt;div id="deleteButton" dojoType="dijit.form.Button"&gt;
          Delete
      &lt;/div&gt;
  
      &lt;div id="grid" jsId="dataGrid" dojoType="dojox.grid.EnhancedGrid"
          structure ="[
                          { field: 'id', name: 'ID', width: '55px' },
                          { field: 'firstName', name: 'First Name', width: '230px' },
                          { field: 'lastName', name: 'Last Name', width: '50px' },
                          { field: 'gender', name: 'Gender', width: '145px'}
                      ]"
          autoWidth="true"
          autoHeight="true"
          plugins="{indirectSelection: true}"
          selectionMode="single"&gt;
      &lt;/div&gt;
  &lt;/util:panel&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see, I am getting the Json String via the AJAX call by DOJO. The grid is generating however, it is not being populated with data. Only two check boxes comes up in the grid...</p>
  
  <p>Is there anything that I'm doing wrongly? </p>