Clicking Reload Grid after successful edit in jqGrid loads old data

Question

With Oleg's help, I'm really making some progress on using jqGrid. The next area of confusion is around what happens after the data is edited and sent to the server for update. If I use inline or form edits, the data looks great in the grid. But when I click the Reload Grid button in the nav, the data is reverted back to their original values. I've read a lot of posts about using the "reloadGrid" but it's not working; probably because of user error.

I'm trying to figure out if the correct approach is to update the grid manually after an edit. I really don't want to go back to the server to get the data again. I was thinking of using the afterComplete event.

Any advice is greatly appreciated. Thank you very much.

Update: I thought I had everything working. If I leave the page, and reload the data, the original data appears in the grid. The data is cached. If I turn on the caching options to always load from the server (in the IE developer bar), it works. The correct data is displayed. Is it normal for the data to be cached like that even if I recreate the jqGrid the next time the page loads?

Update #2: In looking at this demo, http://www.trirand.com/blog/jqgrid/jqgrid.html, select Row Editing and Basic Example. Click Edit row 13, make a change and then save the changes. Click the Reload Grid in the navigator toolbar and the data refreshes back. Is there a way to avoid this? I know I'm missing something.

$.getJSON('FileServices/Get/JSA/' + id, function (data) {
    $("#header_id").html(data.header.Id);
    $('#dateAdded').datepicker();
    $('#number').val(data.header.Number);

    onclickSubmitLocal = function (options, postdata) {
    },
    onAfterComplete = function (response, postdata, formid) {                    
        $("#list").setCell(postdata.id, "Step_Number", postdata.Step_Number);
    },
    editSettings = {                              
        recreateForm: true,
        width: 400,
        mtype: "PUT",
        jqModal: true,
        reloadAfterSubmit: false,
        closeOnEscape: true,
        savekey: [true, 13],
        closeAfterEdit: true,
        viewPagerButtons: false,
        editData: { SomeExtraData: function () { return $('#header_id').val(); } },
        afterComplete: onAfterComplete,
        onclickSubmit: onclickSubmitLocal
    },
    addSettings = {
        recreateForm: true,
        width: 400,
        mtype: "POST",
        jqModal: true,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true,
        editData: { SomeExtraData: function () { return $('#header_id').val(); } },
        onclickSubmit: onclickSubmitLocal
    };

    $("#list").jqGrid({
        url: 'FileServices/GetList/JSA',
        data: data.details,
        editurl: 'FileServices/Save/JSADetail',
        datatype: 'local',
        ajaxRowOptions: { contentType: "application/json", type: "PUT", asyc: true },       
        serializeRowData: function (data) {
            return JSON.stringify(data);
        },
        gridComplete: function () {
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />";
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
                jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
            }

            $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
        },
        loadComplete: function (data) {
            var det = $("#details");
            $("#list").setGridWidth(det.width() - 18, true);
        },
        colNames: ['Actions', 'Header_Id', 'Id', 'Step Number', 'Step Description', 'H', 'C', 'S'],
        colModel: [
          { name: 'act', index: 'act', width: 75, sortable: false },
          { name: 'Header_Id', editable: true, index: 'Header_Id', width: 20, sortable: false, hidden: true },
          { name: 'Id', editable: true, index: 'Id', width: 30, sortable: false, hidden: true },
          { name: 'Step_Number', editable: true, index: 'Step_Number', align: 'center', width: 50, fixed: true, resizable: false, sortable: false, title: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="font-weight: bold: true; white-space: normal; vertical-align: middle;' } },
          { name: 'Step_Description', editable: true, index: 'Step_Description', edittype: 'textarea', editoptions: { rows: '4', cols: '40' }, sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
          { name: 'H', index: 'H', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
          { name: 'C', index: 'C', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
          { name: 'S', index: 'S', width: 0, sortable: false, hidden: true }
        ],
        pager: '#pager',
        rowNum: 5,
        rowList: [5, 10, 15, 20, 25, 30, 50],
        sortname: 'Id',
        height: 'auto',
        rownumbers: true,
        autowidth: true,
        forceFit: true,
        shrinkToFit: true,
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        hidegrid: false,
        caption: ''
    }).navGrid("#pager", { add: true, edit: true, del: false, search: false }, editSettings, addSettings, {}, {}, {});

    $.extend($.jgrid.defaults, {
        datatype: 'json',
        ajaxGridOptions: { contentType: "application/json" }
    });

    $.extend($.jgrid.edit, {
        ajaxEditOptions: { contentType: "application/json" },
        recreateForm: true,
        type: "PUT",
        closeAfterEdit: true,
        closeOnEscape: true,
        serializeEditData: function (postData) {
            return JSON.stringify(postData);
        }
    });
});

and

[WebInvoke(Method = "PUT", UriTemplate = "/Save/JSADetail", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSADetail(int Header_Id, int Id, string Step_Number, string Step_Description, string oper, string id)
{
    JSA.Detail detail = new JSA.Detail();

    detail.Id = Id;
    detail.Step_Number = Step_Number;
    detail.Step_Description = Step_Description;

    detail.Update();

    return "Ok";
}

Answer 1

setting cache: false in my ajax request solved the problem and I didn't have to reload the jqgrid each time. Thank you for asking this question and thank you to Oleg who has been a tremendous help on this site relating to the jqgrid.

Answer 2

Are you verified that the data are changed in the database after saving in jqGrid? Do you verified in Fiddler or Firebug that wrong data come from the server? It can be that you have some caching problem.

In comments to your other question I strict recommended you don't load the data manually with $.getJSON. If you do this you should in any way use $.ajax with cache: false parameter or at least set cache: false option as the defaults options. You can use $.ajaxSetup to do this. By the way the problem with the default cache: true value typically exist only in Internet Explorer. If you repeat your experiments with the grid editing in another browser and you will see no problem in the browser you can be sure that you problem is the cache: false option.

One more way to solve the same caching problem could be to set "Cache-Control: max-age=0" in the HTTP header of the server response which provide the data for the grid. In WCF you can do this with

WebOperationContext.Current.OutgoingResponse.Headers.Set (
    HttpResponseHeader.CacheControl,
    "max-age=0");

in other ASP.NET with respect of

HttpContext.Current.Response.AddHeader ("Cache-Control", "max-age=0");

If means that at the next request to the same URL the old response can not just be get from the server. The client have to re-validate the response. If you set no additional HTTP headers it means just get the request one more time. I recommend you to read the answer about the subject. By the way I personally use the above setting in the WCF always. In the case I use additionally prmNames: { nd:null} parameter. If you use datatype: 'local' instead of datatype: 'json' the setting do nothing.

Moreover another answer which I wrote today can be also interesting for you. It describes not the same, but very close scenario. It shows why it's not good to load the data from the server manually.