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 it matters. Now, the version of jqGrid in the code base is not the newest, but at v. 3.2.4 it should have been pretty stable. No doubt an upgrade would fix this (all right, after this I do have some doubt), but I am ticked. How could no one have noticed this after 3 versions? It's not like I downloaded version 0.01. Or was running an SVN bleeding edge edition. It failed on an exceptionally simple example. jqGrid is a nice component, over all, but far, far too brittle.

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.