I just got a jqGrid (not my first, I might add) put together that took way too much time. While I am going to go back and add some features now, I was struggling to get the blasted thing to do the easiest task in the world: show some data. That's it. No paging. No searching. Nothing fancy, just show the data.
$(document).ready(function() {
$('#grid').jqGrid({
url: 'my_callback.php',
datatype: 'json',
colNames: ['col0', 'col1', 'col2', 'col3', 'col4', 'col5'],
colModel: [
{name: 'id', index: 'id', width: 50},
{name: 'foo', index: 'foo', width: 200},
{name: 'baz', index: 'baz', width: 100},
{name: 'quuz', index: 'quuz', width: 150},
{name: 'bar', index: 'bar', width:150},
{name: 'schnoodle', index: 'schnoodle', width: 150}
],
mtype: 'GET',
rowNum: 20,,
viewrecords: true,
imgpath: '../javascript/themes/basic/images',
caption: 'My Caption',
});
});
Where, of course, a few of those items have been anonymized. As vanilla a set up as you could ask for. I agonized over the JSON data, making sure it matched the default JSON reader (which, I might add, I used last time I used this component). Finally, trial, error, and Google prevailed. This is the code that worked:
$(document).ready(function() {
$('#grid').jqGrid({
url: 'my_callback.php',
datatype: 'json',
dataType: 'json',
colNames: ['col0', 'col1', 'col2', 'col3', 'col4', 'col5'],
colModel: [
{name: 'id', index: 'id', width: 50},
{name: 'foo', index: 'foo', width: 200},
{name: 'baz', index: 'baz', width: 100},
{name: 'quuz', index: 'quuz', width: 150},
{name: 'bar', index: 'bar', width:150},
{name: 'schnoodle', index: 'schnoodle', width: 150}
],
mtype: 'GET',
rowNum: 20,,
viewrecords: true,
imgpath: '../javascript/themes/basic/images',
caption: 'My Caption',
});
});
See the difference? That's right. There is a datatype entry and a dataType entry. Mind you, when I took either of these away, the grid broke in some way. Leave them both, it is fine. A quick grep of the code shows that, predictably, after this angst, parts of the code use datatype and other parts use dataType. JavaScript is case sensitive, so
PS - the link that put me on the right trail is here: http://stackoverflow.com/questions/259435/jqgrid-with-json-data-renders-table-as-empty.