After implementing the solution provided in this thread to show a "No Record Found" message on my jqGrid, I have encountered a couple of issues that need addressing:
a) How can I remove the custom "No Record Found" message when the grid is populated with data.
b) Is there a way to eliminate the gray bar (as shown in the screenshot below) that appears on IE9 when the grid has no content?
https://i.sstatic.net/DlOuL.png
For reference, here is the jsFiddle link: https://jsfiddle.net/99x50s2s/148/
HTML:
<table id="sg1"></table>
<div id="psg1"></div>
</br>
<button type="button" id="PopulateDataBtn">Populate Data</button>
<button type="button" id="RemoveDataBtn">Remove Data</button>
CSS
.alert-info-grid{background-color:#ffffe5;color:black; font-size:14px; font-weight:600; padding:4px; text-align:center;}
JS
$("#sg1").jqGrid({
datatype: "local",
cmTemplate: { sortable: !0, resizable: !0 },
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
width:500,
height: 'auto',
viewrecords: true,
pgbuttons: true,
pager: "#psg1",
pgtext: "Page {0} of {1}",
rowList: [],
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int"},
{name:'invdate',index:'invdate', width:190, sorttype:"date"},
{name:'name',index:'name', width:180},
{name:'amount',index:'amount', width:180, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:180, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
caption: "Test Grid"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter($("#sg1").parent());
$('#PopulateDataBtn').on('click', function(){
var gridObj = $("#sg1");
gridObj.clearGridData();
for(var i=0;i<=mydata.length;i++)
gridObj.jqGrid('addRowData',i+1,mydata[i]);
});
$('#RemoveDataBtn').on('click', function(){
var gridObj = $("#sg1");
gridObj.clearGridData();
$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter(gridObj.parent());
});
Note: The version of jqGrid being used is 4.6.0