Implementing DoJo enhanced Grid with Json

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

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>