jqGrid has issues loading subgrid in IE7

Question

I've been trying to get the "Grid as Subgrid" feature working and have not been having much luck. I thought it was something wrong I was doing in my code, as it was working fine in a stand-alone test. However, I finally noticed the only difference between my app and my test page was my app was running on IE7 and I was running my test page in Firefox. Sure enough, when I loaded the test page in IE7 I had the same issue.

The code that will repro the issue on IE7 is as follows:

$(function () {
    function loadTasks(subgrid_id, row_id)
    {
        var id = subgrid_id + '_t';
        $('#' + subgrid_id).html('<table id="' + id + '"></table>');
        jQuery("#" + id).jqGrid({
            datatype: 'local',
            colNames: ['No','Item','Qty','Unit'],
            colModel: [
                {name:'num',index:'num',width:80,key:true},
                {name:'item',index:'item',width:130},
                {name:'qty',index:'qty',width:70,align:'right'},
                {name:'unit',index:'unit',width:70,align:'right'}
            ],
            height: '100%'
        });
    }

    var x = $("#grid").jqGrid({
        jsonReader: { root: "rows", repeatitems: false },
        datatype: "json",
        height: 'auto',
        autowidth: true,
        forceFit: true,
        colNames:['ID','Name'],
        colModel:[
            {name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"},
            {name:'name', index:'foobar', width:90,  jsonmap: "name"}
        ],

        subGrid: true,
        subGridRowExpanded: loadTasks,
        caption: "Results"
    });

    var jsonData = [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Pear'},
        {id: 4, name: 'Orange'}
    ];

    x[0].addJSONData( { rows: jsonData } );
});

It seems to create some bogus elements on each row, which don't render correctly inside the row. Here's a screen capture of how this renders on IE7:

What's odd is those "undefined" rows are actually part of the valid grid rows, if I hover the mouse over "Apple", then the first undefined row also highlights.

The main reason I chose jqGrid over the other grids was its support for nesting multiple grids (which we really need for our app), however our corporate standard is still IE7 so we need to support this browser. Is there anything I can do to make this feature work right under IE7?

Answer 1

I reported the bug here. The problem was the typing error in the line where += was used instead of =. As the result undefined was added to every row having subgrid.

It's untypical, but Tony modified the code of jqGrid after my bug report and published it on the download page under the same version number 4.3.2. So there are two different versions of jqGrid (with the bug and without it) with the same version number.

So to solve the problem you should just refresh the jqGrid 4.3.2 which you use.

UPDATED: I downloaded the sources of "new jqGrid 4.3.2" and I am very surprised because it contains not only the current bug fix, but also many other changes which was done in jqGrid last time. Many from the changes was suggested by my by the way. For example one can use now custom controls in the Searching Dialog (see my recent answer here), one can use searchOnEnter and closeOnEscape in the SearchingDialog, new afterChange callback is there. Locales for English and German are fixed. For example now it will be used comma as thousandsSeparator in grid.locale-en.js. It's very strange, but new versions of grid.locale-en.js and grid.locale-de.js are placed only in src\i18n subdirectory. The subdirectory js\i18n contains old version of the files (???). I can continue...

In any way I recommend everyone to refresh the sources of jqGrid 4.3.2 previously downloaded from the download page.