I tried a lot to make jqgrid work but it does not work, and problem is there is no error or warning, how to find out where i am wrong. The gd setup is like this. It just show the blank grid, i.e no rows in the grid. I think jqgrid is not able to load the json data. The grid code is below.
$(document).ready(function(){
$("#datagrid").jqGrid({
url:'jqgrid.htm',
dataType:'json',
colNames:['Name','Rollno','Year'],
colModel:[
{name:'Name',width:100,align:'center'},
{name:'Rollno',width:100,align:'center'},
{name:'Year',width:100,align:'center'}
],
jsonReader: {
rows: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
},
rowNum:10,
rowList:[10,15,20,25,30,45,40],
pager:"#navGrid",
sortname:'no',
sortorder:"asc",
viewrecords:true,
caption:"Test"
});
$("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true});
});
HTML
<body>
<table id="datagrid"></table>
<div id="navGrid"></div>
</body>
response data- I am sending this data as string using gson. The response is
{"total":6,"page":1,"records":64,"rows":[{"id":1,"cell":["adeeb","1201",1]},{"id":3,"cell":["Adeeb","1202",1]},{"id":4,"cell":["Adeeb","1203",1]},{"id":5,"cell":["Adeeb","1204",1]},{"id":6,"cell":["Adeeb","1205",1]},{"id":7,"cell":["Adeeb","1206",1]},{"id":8,"cell":["Adeeb","1207",1]},{"id":9,"cell":["Adeeb","1208",1]},{"id":10,"cell":["Adeeb","1209",1]},{"id":11,"cell":["Adeeb","1210",1]},{"id":12,"cell":["Adeeb","1211",1]},{"id":13,"cell":["Adeeb","1212",1]},{"id":14,"cell":["Adeeb","1213",1]},{"id":15,"cell":["Adeeb","1214",1]},{"id":16,"cell":["Adeeb","1215",1]},{"id":17,"cell":["Adeeb","1216",1]},{"id":18,"cell":["Adeeb","1217",1]},{"id":19,"cell":["Adeeb","1218",1]},{"id":20,"cell":["Adeeb","1219",1]},{"id":21,"cell":["Adeeb","1220",1]},{"id":22,"cell":["Adeeb","1221",1]},{"id":23,"cell":["Adeeb","1222",1]},{"id":24,"cell":["Adeeb","1223",1]},{"id":25,"cell":["Adeeb","1224",1]},{"id":26,"cell":["Adeeb","1225",1]},{"id":27,"cell":["Adeeb","1226",1]},{"id":28,"cell":["Adeeb","1227",1]},{"id":29,"cell":["Adeeb","1228",1]},{"id":30,"cell":["Adeeb","1229",1]},{"id":31,"cell":["Adeeb","1230",1]},{"id":32,"cell":["Adeeb","1231",1]},{"id":33,"cell":["Adeeb","1232",1]},{"id":34,"cell":["Adeeb","1233",1]},{"id":35,"cell":["Adeeb","1234",1]},{"id":36,"cell":["Adeeb","1235",1]},{"id":37,"cell":["Adeeb","1236",1]},{"id":38,"cell":["Adeeb","1237",1]},{"id":39,"cell":["Adeeb","1238",1]},{"id":40,"cell":["Adeeb","1239",1]},{"id":41,"cell":["Adeeb","1240",1]},{"id":42,"cell":["Adeeb","1241",1]},{"id":43,"cell":["Adeeb","1242",1]},{"id":44,"cell":["Adeeb","1243",1]},{"id":45,"cell":["Adeeb","1244",1]},{"id":46,"cell":["Adeeb","1245",1]},{"id":47,"cell":["Adeeb","1246",1]},{"id":48,"cell":["Adeeb","1247",1]},{"id":49,"cell":["Adeeb","1248",1]},{"id":50,"cell":["Adeeb","1249",1]},{"id":51,"cell":["Adeeb","1250",1]},{"id":52,"cell":["Adeeb","1251",1]},{"id":53,"cell":["Adeeb","1252",1]},{"id":54,"cell":["Adeeb","1253",1]},{"id":55,"cell":["Adeeb","1254",1]},{"id":56,"cell":["Adeeb","1255",1]},{"id":57,"cell":["Adeeb","1256",1]},{"id":58,"cell":["Adeeb","1257",1]},{"id":59,"cell":["Adeeb","1258",1]},{"id":60,"cell":["Adeeb","1259",1]},{"id":61,"cell":["Adeeb","1260",1]},{"id":62,"cell":["Adeeb","1261",1]},{"id":63,"cell":["Adeeb","1262",1]},{"id":64,"cell":["Adeeb","1263",1]},{"id":65,"cell":["Adeeb","1264",1]}]}
What i am missing more?
Thanks and Regards
You main error is usage of wrong case in the option
dataType:'json'
instead of
datatype:'json'
I would recommend you additionally remove jsonReader with default values and change sortname:'no' to some correct value (sortname: 'Rollno' for example). Additionally I would recommend you to use gridview: true option to improve performance, autoencode: true to be sure that you can display any text in the grid, use height: "auto" to have optimal height of the grid. Additionally it seems to me that you should include loadonce: true in the grid because the server returns all data instead of just one requested page with only 10 rows.
As the result you will have the grid like on the demo.