Implementing DoJo enhanced Grid with Json - spring

Question

I have been trying to implement DoJo Enhanced Grid with Json and I have not been successful thus far.
This is what I have done so far;
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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">
<jsp:output omit-xml-declaration="yes"/>
<spring:url value="/students/listdata" var="mydatasource"/>
<script type="text/javascript">
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);
}
});
}
</script>
<util:panel id="titlePane" title="Course List">
<div id="addButton" dojoType="dijit.form.Button">
Add
</div>
<div id="deleteButton" dojoType="dijit.form.Button">
Delete
</div>
<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">
</div>
</util:panel>
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...
Is there anything that I'm doing wrongly?

Answer 1

I have never used the EnhancedGrid, but for a regular grid I did this by creating the store declaratively, attaching its ID to the grid (via store=... attribute in the HTML), and then when I wanted to refresh the grid with new store info, called:
grid.setStore(...,null,null);

Answer 2

found out the problem to the grid not loading data.
Actually I needed to handle the data as a Json String.
below is copy of the code that works:
<script type="text/javascript">
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}",
handleAs: "json",
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);
}
});
}
</script>