I want to display data from a json files in a data grid using dojo ver 1.0.0. I am able to diplay the data when i declare it on my code but when i store the same data in a json format so i can reference it in my script,i get an empty grid. This is my json file;

{ data: [ ['10''myfile','Css', 'CS Degree','Dr. Bottoman','This is mine'], ['10'myfile2','CS716', 'CS Degree','Prof Frank', 'This is course'], ['10'myfile3 ','CS714', 'CS Degree', 'Dr. Ree', 'Welcome'], ['14', 'myfile4','CS772', 'CS Degree', 'Mr. Boss', 'This will display content' ], ['18', 'myfile5','CS774', 'CS Degree','Ms. Kirk', 'This is networks.' ] ] }

and below is my code;

@import "../../../dojo/resources/dojo.css"; @import "../_grid/Grid.css";

body { font-size: 1.0em; } #grid { height: 400px; border: 1px solid silver; } .text-oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-scrolling { height: 4em; overflow: auto; } .text-scrolling { width: 21.5em; }

dojo.require("dojox.grid.Grid"); dojo.require("dojox.grid._data.model"); dojo.require("dojo.parser");

   <script type="text/javascript">



      /*<span dojoType="dojo.data.ItemFileWriteStore"
       jsId="myStore" url="course.json">
      </span>*/     

data = [ ['10''myfile','Css', 'CS Degree','Dr. Bottoman','This is mine'], ['10'myfile2','CS716', 'CS Degree','Prof Frank', 'This is course'], ['10'myfile3 ','CS714', 'CS Degree', 'Dr. Ree', 'Welcome'], ['14', 'myfile4','CS772', 'CS Degree', 'Mr. Boss', 'This will display content' ], ['18', 'myfile5','CS774', 'CS Degree','Ms. Kirk', 'This is networks.' ] ];

                    getDetailData = function(inRowIndex) {

var row = data[this.grid.dataRow % data.length ]; switch (this.index) {

case 0:
                             return row[5];

                            case 1:
 return row[2];
case 2:
 return row[0];
case 3:
 return row[1];
case 4:
 return row[3];
case 5:
 return row[4];

                            default: return row[this.index];

} }

getName = function(inRowIndex) { var row = data[inRowIndex % data.length]; return row[1]; }

// Main grid structure

var gridCells = [ { type: 'dojox.GridRowView', width: '20px' }, { onBeforeRow: function(inDataIndex, inSubRows) { inSubRows[1].hidden = !detailRows[inDataIndex]; }, cells: [[ { name: 'Master', width: 3, get: getCheck, styles: 'text-align: center;' }, { name: 'Detail', get: getName, width: 60 }, ], [ { name: '', get: getDetail, colSpan: 2, styles: 'padding: 0; margin: 0;'} ]] } ];

// html for the +/- cell function getCheck(inRowIndex) { var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif'); var show = (detailRows[inRowIndex] ? 'false' : 'true') return ''; }

// provide html for the Detail cell in the master grid
function getDetail(inRowIndex) {

var cell = this;

// we can affect styles and content here, but we have to wait to access actual nodes

setTimeout(function() { buildDetailgrid(inRowIndex, cell); }, 1);

// look for a Detailgrid

var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); var h = (Detailgrid ? Detailgrid.cacheHeight : "120") + "px";

// insert a placeholder return ''; }

// the Detail cell contains a Detailgrid which we set up below

var DetailgridCells = [{ noscroll: true, cells: [ [ {name: "Brief Course Description",width: "auto"}, {name: "Course Code" }, {name: "Credits" }, {name: "Subject" }, {name: "Prerequisite" }, {name: "Lecturer"}], []

]}];

var DetailgridProps = { structure: DetailgridCells, rowCount: 1, autoHeight: true, autoRender: false, "get": getDetailData };

// identify Detailgrids by their row indices function makeDetailgridId(inRowIndex) { return grid.widgetId + "Detailgrid"/+ inRowIndex/; }

// if a Detailgrid exists at inRowIndex, detach it from the DOM function detachDetailgrid(inRowIndex) { var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); if (Detailgrid) dojox.grid.removeNode(Detailgrid.domNode); }

// render a Detailgrid into inCell at inRowIndex function buildDetailgrid(inRowIndex, inCell) { var n = inCell.getNode(inRowIndex).firstChild; var id = makeDetailgridId(inRowIndex); var Detailgrid = dijit.byId(id); if (Detailgrid) { n.appendChild(Detailgrid.domNode); } else { DetailgridProps.dataRow = inRowIndex; DetailgridProps.widgetId = id; Detailgrid = new dojox.VirtualGrid(DetailgridProps, n); } if (Detailgrid) { Detailgrid.render(); Detailgrid.cacheHeight = Detailgrid.domNode.offsetHeight; inCell.grid.rowHeightChanged(inRowIndex); } }

// destroy Detailgrid at inRowIndex function destroyDetailgrid(inRowIndex) { var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); if (Detailgrid) Detailgrid.destroy(); }

// when user clicks the +/-

detailRows = []; function toggleDetail(inIndex, inShow) { if (!inShow) detachDetailgrid(inIndex); detailRows[inIndex] = inShow; grid.updateRow(inIndex); }

dojo.addOnLoad(function() { window["grid"] = dijit.byId("grid"); dojo.connect(grid, 'rowRemoved', destroyDetailgrid); });

Test grid