Show and remove "No Record Found" message in jqgrid 4.6.0

Question

I have followed the answer given here jqGrid with no data - how to set a more prominent 'no data' message? to display a "No Record Found" Message. It works great but, I have the following questions,

a) How to remove the custom "No Record Found" message while populating data in the grid.

b) How to remove the gray bar (please see the snapshot below) that appears on IE9 when the grid is empty.

Here is the fiddler: 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: I am using jqgrid 4.6.0

Answer 1

The main reason of your problem: you fill the data of the grid having datatype: "local" in a wrong way. You use addRowData, which is the worst way which I know.

I modified your demo to the following: https://jsfiddle.net/OlegKi/99x50s2s/150/ which works now correctly.

The main part of the changes code is below:

$("#sg1").jqGrid({
    datatype: "local",
    ...
    localReader: {
        page: function (obj) {
            return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
        }
    },
    onInitGrid: function () {
        $("<div class='alert-info-grid'>No Record(s) Found</div>")
            .insertAfter($(this).parent());
    },
    loadComplete: function () {
        var $this = $(this), p = $this.jqGrid("getGridParam");
        if (p.reccount === 0) {
            $this.hide();
            $this.parent().siblings(".alert-info-grid").show();
        } else {
            $this.show();
            $this.parent().siblings(".alert-info-grid").hide();
        }
    },
    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"}
    ];

function setGridDataAndReload ($grid, data) {
    var p = $grid.jqGrid("getGridParam");
    p.data = data;
    $grid.trigger("reloadGrid", [{page: 1}]);
}

$('#PopulateDataBtn').on('click', function(){
    setGridDataAndReload($("#sg1"), mydata);
});

$('#RemoveDataBtn').on('click', function(){
    setGridDataAndReload($("#sg1"), []);
});

The demo still have minor problems (like the right border of the grid and some other). To fix the problem you can upgrade jqGrid 4.6 to the latest version of free jqGrid (version 4.10.0) which support Bootstrap css and the problem with "the gray bar" is fixed too.