javascript - Jqgrid shows 'Loading' in IE9 when gridview is set to true

Question

My grid works fine in firefox and chrome but it shows 'Loading' icon in IE9 when gridview is set to true. This is using jqgrid 4.7.0

var setGrid = $("#recordSetsGrid");
var gridView=false; //setting this to true in IE9 causes grid not to show with only message 'Loading'.

setGrid.jqGrid(
        {
            ajaxGridOptions: {cache: false},
            url : getUrlContext()+loadUrl,
            postData : {
                searchText : function() {
                    return $("#" + setSearchTextId)
                            .val();
                }
            },
            datatype : "json",
            editurl : setGrid_editUrl,
            colNames : ["","Record Set", "Origin",
                    "Origin", "Organization",
                    "Sharing", "Active?",
                    "Comments" ],
            editCaption : "Edit Record Set",
            colModel : [
                    {
                        name : "crud",
                        width : 10,
                        fixed : true,
                        editable : false,
                        search : false
                    },
                    {
                        name : "recordSet",
                        width : 65,
                        fixed : true,
                        editable : false,
                        search : false
                    },
                    {
                        name : "origin",
                        width : 90,
                        editable : true,
                        hidden : true,
                        editrules : {
                            required : false,
                            edithidden : true
                        },
                        search : true,
                        editoptions : {
                            size : "30"
                        }
                    },
                    {
                        name : "domainName",
                        width : 90,
                        editable : false,
                        search : true,
                        searchoptions : {
                            caption : "Search in record sets",
                            sopt : [ 'cn' ]
                        },
                        formatter : originFormatter,
                        editrules : {
                            required : true,
                            edithidden : false
                        }
                    },
                    {
                        name : "org",
                        width : 80,
                        align : "left",
                        editable : true,
                        search : false,
                        formatter : orgFormatter,
                        editoptions : {
                            value : orgChoices
                        },
                        edittype : "select",
                    },
                    {
                        name : "sharing",
                        width : 65,
                        fixed : true,
                        align : "left",
                        editable : true,
                        search : false,
                        editoptions : {
                            value : sharingChoices
                        },
                        edittype : "select",
                    },
                    {
                        name : "active",
                        width : 45,
                        fixed : true,
                        align : "center",
                        editable : true,
                        search : false,
                        edittype : "checkbox",
                        editoptions:{value:"Yes:No", defaultValue: "Yes"}       
                    }, 
                    {
                        name : "comments",
                        width : 80,
                        align : "left",
                        editable : true,
                        search : false,
                        editoptions : {
                            size : "60"
                        }
                    } ],
            pager : "#recordSetsGridPager",
            gridview: gridView,
            rowNum : getRecordSetInitialPageSize(),
            rowList : getRecordSetPageSizes(),
            sortname : "origin",
            sortorder : "desc",
            viewrecords : true,
            autoencode : true,
            rownumbers: true,
            height : 100,
            width : 700,
            multiselect : false,
            caption : "Record Sets",
            onSelectRow : function(ids) 
            {
                var rowData = setGrid.jqGrid("getRowData",ids);
                var origin=rowData["domainName"];
                var caption="Resource Records: "+ origin;
                if (ids == null) {
                    ids = 0;
                    if (jQuery("#recordsGrid").jqGrid('getGridParam','records') > 0) {
                        recGrid.jqGrid('setGridParam',{url:getUrlContext()+"" +
                                "/ZoneEditManaged.action?_eventName=getResourceRecords&isInit",page:1});
                        //recGrid.jqGrid('setCaption',caption).trigger('reloadGrid');
                        recGrid.trigger('reloadGrid');
                    }
                } else {
                    recGrid.jqGrid('setGridParam',{url:getUrlContext()+
                        "/ZoneEditManaged.action?_eventName=getResourceRecords&&isInit=1",page:1});
                        //"/ZoneEditManaged.action?_eventName=getResourceRecords&&isInit=1&setId="+ids,page:1});
                    //recGrid.jqGrid('setCaption',caption).trigger('reloadGrid');
                    recGrid.trigger('reloadGrid');
                }

                $("#captionOriginId").html(origin);

                //drawResourceRecordSearchBox(recGrid,caption); 
            },
            ondblClickRow : function(rowid) {
                var p = setGrid[0].p;
                if (p.selrow !== rowid) {
                    grid.jqGrid('setSelection',
                            rowid);
                }
                setGrid.jqGrid('editGridRow',
                        rowid, editProps);
            },
            loadComplete : function() {
                logMessage("In recordSetsGrid load complete");
                applyContextMenu();
                highlightFilteredData.call(this,setSearchTextId);
            },
            loadError : function(jqXHR, textStatus,
                    errorThrown) {
                handleAjaxError(jqXHR, textStatus,
                        errorThrown);
            }
        }).navGrid('#recordSetsGridPager', {
    add : true,
    edit : true,
    del : true,
    search : false
}, editProps, addProps, delProps);

If I change the gridView=false, it works well in IE9. I will have large amount of the data in this grid so I read that gridView=true speeds up the performance in case of large data. Any ideas to get gridView to work in IE9 is appreciated.

Thanks

Answer 1

The modifications by @Oleg were helpful for my similar issue, however I still received the error invalid target element for this operation in Internet Explorer 9 (no problem in 7, 8, 10, or 11) when attempting this line of code:

self.firstElementChild.innerHTML += rowData.join('');

However, after setting the jqGrid property...

gridview: false

... I no longer have the error in Internet Explorer 9. As I understand, setting gridview to true builds the table all at once giving faster performance, whereas setting gridview to false builds it row by row and is a bit slower.

I don't know how jqGrid is able to append table data to innerHTML, because, from MSDN:

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

However, even with gridview:true, it somehow works for me in all versions of IE, except for IE9.

This isn't really an answer, but hopefully it helps someone. As always, thank you @Oleg for all of your contributions to jqGrid. You have helped me more than you can imagine.