title: Clicking Reload Grid after successful edit in jqGrid loads old data
body: <p>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 <strong>Reload Grid</strong> 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.  </p>
  
  <p>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 <strong>afterComplete</strong> event.  </p>
  
  <p>Any advice is greatly appreciated.  Thank you very much.</p>
  
  <p>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?</p>
  
  <p>Update #2: In looking at this demo, <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow">http://www.trirand.com/blog/jqgrid/jqgrid.html</a>, 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.</p>
  
  <pre><code>$.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 &lt; ids.length; i++) {
                  var cl = ids[i];
                  be = "&lt;input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" /&gt;";
                  se = "&lt;input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" /&gt;";
                  ce = "&lt;input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" /&gt;";
                  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);
          }
      });
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>[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";
  }
  </code></pre>