jQgrid after Click on Reload Grid button, all data get disappear

Question

I am new in jqGrid programming. I am using inline editing jQgrid with add, edit and reload grid functionality. When I come on page, grid loaded successfully. But after Click on reload grid button, all data from grid get disappear. The worst part is after click, its not event making Ajax call to web service. I go through the code but I didn't find any fault in my code. Below I have given my entire jqgrid code, please refer and let me know where I went wrong.

function RenderOGPGrid() {

var oGrid = $('#tbOGP'), lastSel;
var topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager";

oGrid.jqGrid({
    url: sRelativePath + '/WSAjax.asmx/GetDataForGrid',
    mtype: 'POST',
    datatype: 'json',
    ajaxGridOptions: {
        contentType: "application/json; charset=utf-8"
    },
    serializeGridData: function (data) {
        return JSON.stringify(data);
    },
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    },
    onSelectRow: function (rowid) {
        if (rowid && rowid != lastSel) {
            if (typeof lastSel !== "undefined") {
                $(this).jqGrid('restoreRow', lastSel);
            }
            lastSel = rowid;
        }
        updateButtonState($(this));
    },
    colNames: ['Id', 'Name', 'Age'],
    colModel: [
        { name: 'Id', index: 'Id', width: 30},
        { name: 'Name', index: 'Name', width: 30},
        { name: 'Age', index: 'Age', width: 30},
    ],
    prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
    autowidth: true,
    search: false,
    postData: {
        filters: null,
        spName: 'GetOutwardGPList',
        paramXML: ""
    },
    width: 'auto',
    height: 'auto',
    rowNum: 20,
    rowList: [20, 50, 100, 150, 200],
    sortname: "",
    sortorder: "asc",
    page: 1,
    gridview: true,
    autoencode: true,
    viewrecords: true,
    ignoreCase: true,
    toppager: true,
    footerrow: true,
    editurl: 'clientArray',
    gridComplete: function () {
        $("#tbOGP").setGridParam({ datatype: 'local' });

        $("table#tbOGP tr:last").addClass('ireg-jqgrid-lastrow');
        $("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
        recalculateWidthInPercent('container', 'tbOGP', 0.96);
    },
    loadComplete: function () {
        updateButtonState($(this));
    }, 
    caption: 'Outward Gate Pass List'
 }).jqGrid('navGrid', topPagerSelector, {
    add: false,
    edit: false,
    del: false,
    search: false
    //TckNo. iReg-444(DF01): Removed property refresh: false 
 }, {}, {}, {}, {}, {}).
 jqGrid('inlineNav', topPagerSelector, {
    addParams: {
        useDefValues: true,
        addRowParams: {
            oneditfunc: function (rowid) {
                updateButtonState($(this));
            },
            aftersavefunc: function (rowid, response) {
                updateButtonState($(this));
            },
            afterrestorefunc: function () {
                updateButtonState($(this));
            }
        }
    },
    editParams: myEditParams
 });
}

Answer 1

The main origin of your problem is in the line $("#tbOGP").setGridParam({ datatype: 'local' }); of your code. I don't understand the goal of the line. I suppose that you get the line from some example which was created for very old version of jqGrid. jqGrid supports loadonce: true holding of local data starting with version 3.7. If one uses loadonce: true then jqGrid automatically will change datatype to "local" after loading of data from the server. It's important that jqGrid saves the data loaded from the server in internal option data. So the reloading of the data for example jqGrid do using the data option. In the way the data will be not dispersed.

So one option to solve your problem will be to remove the line $("#tbOGP").setGridParam({ datatype: 'local' }); from gridComplete callback and add loadonce: true option.

Another way to solve your problem is to reset datatype to "local" before reloading. One can use beforeRefresh callback of navGrid:

...
}).jqGrid('navGrid', topPagerSelector, {
    add: false,
    edit: false,
    del: false,
    search: false´,
    beforeRefresh: function () {
         $(this).jqGrid("setGridParam",{datatype: "json"});
    }
    //TckNo. iReg-444(DF01): Removed property refresh: false 
}, {}, {}, {}, {}, {}).
...