Jqgrid shows “Download” in IE9 when gridview is true

Question

My grid works fine in firefox and chrome, but it shows the Download icon in IE9 when gridview is true. It uses 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 gridView = false, it works well in IE9. I will have a lot of data in this grid, so I read that gridView = true speeds up performance in case of big data. Any ideas on creating a gridView to work in IE9 is appreciated.

thanks

Answer 1

After your comments on your question, I understand the problem. The cause of the problem is an error in jqGrid. It uses the firstElementChild (see lines ) property:

 } else { //$("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append(rowData.join('')); ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) ts.grid.cols = ts.rows[0].cells; // update cached first row } 

I fixed the error some time ago in my jqGrid fork (see lines currently):

 } else if (self.firstElementChild) { self.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) self.grid.cols = self.rows[0].cells; // update cached first row } else { // for IE8 for example $tbody.html($tbody.html() + rowData.join('')); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) self.grid.cols = self.rows[0].cells; // update cached first row } 

Therefore, I can offer to make the same changes in jquery.jqGrid.src.js or load the modified jquery.jqGrid.src.js , jquery.jqGrid.min.js and jquery.jqGrid.min.map from my repository (see js folder). I must warn you that the code is in the development of the stadium, and I plan to publish the first release next month, but the current code is stable and contains many other fixes that I found, and some new features (briefly described in readme).

UPDATED: The code above that fixes the problem comes from my new code, so it contains self and $tbody defined above in my code. If you want to change jqGrid 4.7 code you can use

 } else if (ts.firstElementChild) { ts.firstElementChild.innerHTML += rowData.join(''); ts.grid.cols = ts.rows[0].cells; } else { // use for IE8 for example var $tbody = $(ts.tBodies[0]); $tbody.html($tbody.html() + rowData.join('')); ts.grid.cols = ts.rows[0].cells; } 

UPDATED 2: The current jqGrid snippet code is as follows

 if (p.treeGrid === true && fpos > 0) { $(self.rows[fpos]).after(rowData.join("")); } else if (p.scroll) { $tbody.append(rowData.join("")); } else if (self.firstElementChild == null || (document.documentMode != undefined && document.documentMode <= 9)) { // for IE8 for example $tbody.html($tbody.html() + rowData.join("")); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) self.grid.cols = self.rows[0].cells; // update cached first row } else { self.firstElementChild.innerHTML += rowData.join(""); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) self.grid.cols = self.rows[0].cells; // update cached first row } 

Answer 2

The @Oleg modifications were useful for my similar problem, however, I still got an invalid target element error for this operation in Internet Explorer 9 (no problem in 7, 8, 10 or 11) when trying this line of code:

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

However, after setting the jqGrid ... property

 gridview: false 

... I no longer have an error in Internet Explorer 9. As I understand it, setting gridview to true builds the table immediately, giving better performance, while setting gridview to false builds it line by line and a bit slower,

I don't know how jqGrid can add table data to innerHTML because from MSDN :

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

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

This is actually not the answer, but hopefully this helps someone. As always, thanks @Oleg for all your contributions to jqGrid. You have helped me more than you can imagine.

Answer 3

I wrapped 'ts.firstElementChild' in $ rather the 'innerHTML property.

  try { ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) } catch (e) { //IE 9 bug-fix for exception "invalid target element for this operation" $(ts.firstElementChild).html($(ts.firstElementChild).html() + rowData.join('')); } 

and it works.

Answer 4

@Oleg, I had to make some changes to your patch since I was getting JavaScript errors on the "me". I think that if I used the full script, it would work, I think. Here is my revised code, and please let me know if this does not look right.

  } else if (ts.firstElementChild) { //Fix applied by Oleg for gridView=true in IE9. ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) ts.grid.cols = ts.rows[0].cells; // update cached first row } else { // for IE8 for example $("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append($("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").html() + rowData.join('')); //Modified //$tbody.html($tbody.html() + rowData.join('')); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) //doesn't work. ts.grid.cols = ts.rows[0].cells; // update cached first row } 

Now it works. Thank you for your help. Tomorrow I will draw my branched code grid and let you know the result.