Hi - New to JSON and new to jqGrid. I have successfully created a
simple demo using XML. Took me about an hour (I'm slow). However, I
struggled about 8 hrs to get the JSON version to work. In fact, I even
removed the server-side JSON and used the embedded JSON string
technique (as noted in the PDF docs on page 30 - using datastr). Still
- the grid rendered with a blank table. I discovered the solution in
many newbie fits and starts - the last bit that I discovered is that
the brackets shown for json data row cell [ vs. curly braces { are
incorrect in the jqGrid PDF doc. The jqGrid doc shows JSON output in
the format I have in version 1 (see further info and issue below).
--------------- version 1 - fails in IE and Firefox
-----------------------
<html>
<head> <title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/
basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/
jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
var mystr =
"{" +
"total: '1'," +
"page: '1'," +
"records: '5'," +
"rows : [" +
"[id:'1', cell:['cell11','cell12','cell13']]," +
"[id:'2', cell:['cell21','cell22','cell23']]," +
"[id:'3', cell:['cell31','cell32','cell33']]," +
"[id:'4', cell:['cell41','cell42','cell43']]," +
"[id:'5', cell:['cell51','cell52','cell53']]" +
"]" +
"}";
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: 'jsonstring',
datastr: mystr,
jsonReader : { root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
subgrid: { root:"rows", repeatitems: true, cell:"cell" }
},
colNames: ['Col 1','Col 2', 'Col 3'],
colModel :[ {name:'uno'},
{name:'dos'},
{name:'tres'} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first JSON grid' });
});
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:right;"></div>
</body>
</html>
------ code version 2 -------
Comment: I saw a few examples on the web where the JSON string output
used { instead of [. I made this change and now the grid renders fine
in Firefox. Here's the only difference:
var mystr =
"{" +
"total: '1'," +
"page: '1'," +
"records: '5'," +
"rows : [" +
"{id:'1', cell:['cell11','cell12','cell13']}," +
"{id:'2', cell:['cell21','cell22','cell23']}," +
"{id:'3', cell:['cell31','cell32','cell33']}," +
"{id:'4', cell:['cell41','cell42','cell43']}," +
"{id:'5', cell:['cell51','cell52','cell53']}" +
"]" +
"}";
-- Note {id: ...}, instead of: [id: ....],
So, the good news is this works in Firefox. I still had trouble in IE
6 SP2. However, I just tried it in IE7 and it works fine. Then, I
tried again in IE 6 --- works fine, too. Probably a cache issue.
So.... happy new year. I've got a working baseline demo in both XML
and JSON. You can try it here: http://www.mwdb.com/jquery/myfirstgrid.html
-- this uses XML generated by a simple ASP page. JSON is the above
HTML with embedded json datastr: http://www.mwdb.com/jquery/jsongrid.html
Now, on to dynamic content using ASP.NET and jqGrid. Note to Tony: it
may be a good idea to update your documentation with the correct
brackets for JSON, plus show a couple simpler "hello world" examples
like I created. It's really painful to start out but I'm pleased to
have made it work.
