jqgrid won't load json data - json

Question

I am new to jqgrid and am trying to use json to load the data. I have tried to use the jqgrid demos as a base and then build from there. The json data looks good, but I can't get anything loaded into the grid. Any ideas? I was hoping the use of loaderror or loadcomplete would at least give me insight, but I am not able to retrieve any message why the grid won't load.
json data:
{
"page": "1",
"total": 1,
"records": "12",
"rows": [
[
"67",
"3 - Sandbox: Appointment Set"
],
[
"68",
"1 - Sandbox: Email requested"
],
[
"69",
"2 - Sandbox: Questions not answered"
],
[
"74",
"1 - TenPointSix: Email requested for more information"
],
[
"75",
"2 - TenPointSix: Registered for webinar2"
],
[
"76",
"3 - TenPointSix: Webinar registration confirmed"
],
[
"93",
"5-Test Entry"
],
[
"94",
"test3"
],
[
"95",
"test2"
],
[
"97",
"Jeff"
],
[
"103",
"sortorder"
],
[
"106",
"reload"
]
]
}
My grid code:
<table id="jsonmap"></table>
<div id="pjmap"></div>
<script language="JavaScript" type="text/javascript">
jQuery("#jsonmap").jqGrid({
url:'sampleLoad.php?client=<?=$clientId5?>',
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames:['Inv No','Name'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:100}
],
rowNum:15,
rowList:[15,30,45],
pager: '#pjmap',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
jsonReader: {
root: "Rows",
cell: "",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
id: "0"
},
loadComplete: function() {
alert("Load Complete");
},
loadError: function(xhr,st,err) { $("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); },
caption: "JSON Mapping",
width: '900',
height: '300'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
Any help would be appreciated.
Thanks,
Jeff

Answer 1

The problem is the wrong jsonReader which you use. For example you use rows in the JSON data, but use root: "Rows". The format of the data corresponds default repeatitems: true property, but you used repeatitems: false and so on.
The correct jsonReader is
jsonReader: {
cell: "",
id: "0"
}
Additionally I would recommend you to add gridview: true and use height: 'auto' instead of height: '300' which simplify the setting of height.
The demo shows the modifications.