display data from json file in datagrid
- by kayn
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
