jqgrid paging issue - Not loaded data with page

Question

I am using Jqgrid with customized Edit, Delete buttons. Also , I am using external search to search in grid. I am fustrating with one problem since two days.

Please check my code below of binding jqgrid

jQuery(document).ready(function () {
    var myGrid = $('#list');

    myGrid.jqGrid({
        url: '/Site/GetData/',
        datatype: "json",
        contentType: "application/json; charset-utf-8",
        mtype: 'POST',
        loadonce: true,
        colNames: ['Site ID', 'Site Name', 'Email Address', 'Website', 'Contact Person', 'Phone number', 'Mobile number', "Edit", "Delete"],
        colModel:
        [
            { name: 'SiteID', hidden: true },
            { name: 'SiteName' },
            { name: 'EmailID' },
            { name: 'Website' },
            { name: 'ContactPerson' },
            { name: 'PhoneNo' },
            { name: 'MobileNo' },
            { name: 'Edit', width: 50, sortable: false, formatter: ColumnFormatter },
            { name: 'Delete', width: 60, sortable: false, formatter: ColumnFormatter },
        ],
        autowidth: true,
        rowNum: 5,
        rowList: [5, 10, 20, 50],
        pager: jQuery('#pager'),
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        ignoreCase: true,

    }).navGrid('#pager',
        {
            rowNum: 5, edit: false, add: false, del: false, search: false, refresh: true
        }
       );
});

Using Above code I am binding Jqgrid. Now, I need to delete a row from the grid, after deleting I need to refresh whole the grid. But it does not kept data according to page. Please check my delete function below :

 function deleteRow(imageElement, UserId) {
    var data = new Object();
    data.id = UserId;
    var _data = JSON.stringify(data);
    $("#list").setGridParam({ datatype: 'json' });
    $.ajax({
        url: '@Url.Action("Delete", "Site")',
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: _data,
        success: function (result) {
            var currentPage = $('#gridData').getGridParam('page');
            $('#list').trigger('reloadGrid');
            $("#list").setGridParam({ page: currentPage })
        },
        error: function (result) {
            alert("This data can not be deleted");
        }
    });
}

Okay , using above code , I am deleting row, and if response is Success than need to reload whole the grid.

Now if I am at 2nd page and deleting any row, than it will reloads the grid , it shows me Page number is set as 2. But records shows me from 1st page of grid.

Please help me for that

Answer 1

I' m not sure that I correctly understand the behavior which you need to implement. If you want to reload the whole grid from the server then you should reset the value of datatype before reloading. The reason: you use loadonce: true which loads the data from the server once, save it in internal jqGrid parameters data and _index and then the datatype will be changed to "local". So if you want to reload the data from the server you should execute

$('#list').jqGrid('setGridParam', {datatype: 'json'});

before reloadGrid.

Additionally if you need to reload grid with specific page you can use page parameter of jqGrid (see the answer for details). In the most cases the usage of current:true option is what one need. So the code should be something like below

...
success: function (result) {
    $("#list").setGridParam({ datatype: 'json' })
        .trigger('reloadGrid', [{ current: true }]);
}