JQGrid: When editing a newly added record, a new row is being added

Question

I am trying out JQgrid (4.7) to use with our project. Everything works as expected except once caveat. When editing a newly added record, jqgrid adds new row to the grid. I have reloadAfterSubmit set to false because I will have large amount of data on the grid and I do not want to reload the grid for every change.

<script type="text/javascript">
jQuery(document).ready(function () {
   'use strict';
   var list = $("#list");

   var addPops =  {
                addCaption: "Add Record Set",
                recreateForm:true,
                reloadAfterSubmit:false,
                closeAfterAdd:true,
                width: 470,
                afterSubmit : function(response, postdata) {
                     return [true, "", response.responseJSON.rows[0].rowId];
                },
                afterComplete: function(response,postdata,formId) {
                    var id=postdata.id;
                    var rowId=response.responseJSON.rows[0].id;
                    list.setRowData(id,{"rowId":response.responseJSON.rows[0].rowId});
                    list.setRowData(id,{"sharing":response.responseJSON.rows[0].sharing});
                    list.setRowData(id,{"comments":response.responseJSON.rows[0].comments});
                    //list.setCell(id,{"rowId":response.responseJSON.rows[0].rowId});
                    //list.setCell(id,{"sharing":response.responseJSON.rows[0].sharing});
                    //list.setCell(id,{"comments":response.responseJSON.rows[0].comments});
                }
            };

   var editProps =  {
                editCaption: "Edit Record Set",
                recreateForm:false,
                reloadAfterSubmit:false,
                closeAfterEdit:true,
                width: 470
            };

   list.jqGrid({
    url: "/DmsClient/ZoneEditManaged.action?_eventName=getRecordSets&searchText=",
    datatype: "json",
    editurl: "/DmsClient/ZoneEditManaged.action?_eventName=applyRecordSetChange",
    colNames: ["Sharing", "Comments"],
    editCaption: "Edit Record Set",
    colModel: [
        { name: "sharing", width: 65,fixed:true, align: "left", editable:true, search:false},
        { name: "comments", width: 80, align: "left", editable:true, search:false,
            editoptions: {size: "60"} }
    ],
    pager: "#listPager",
    rowNum: 10,
    rowList: [10, 20, 30, 100, 500, 1000],
    sortname: "origin",
    sortorder: "desc",
    viewrecords: true,
    autoencode: true,
    height: 100,
    width: 700,
    multiselect: false,
    caption: "Record Sets",
  }).navGrid('#listPager',{add:true,edit:true,del:false,search:false},editProps,addPops); 
  });
</script>

Another symptom is that when edit a newly created record, the input boxes are empty. The data exists in the table body but does not get populated on the edit form when edit. End result is when update is clicked, it creates a new record in the grid.

Looks like I am missing something but cannot figure out that it is. Appreciate any help with this.

Updated: from debugging, Looks like I am not changing the id from _empty to real id and hence when it edited, the operation is changed from edit to add. Hopefully I can use aftercomplete event to change this id and fix the operation.

Answer 1

OK. After long debugging and trying few things out, I finally got this working. I am not exactly sure if this is the most elegant way of making it to work. Here's the fix.

                afterSubmit : function(response, postdata) {
                     postdata["id"] = null;
                     return [true, "", response.responseJSON.rows[0].id];
                },

When row is added jqgrid calls afterSubmits and assigns newId only if postdata[id] is null. And in submit action of edit form, if the id is "_empty" form adds new record, otherwise it updates it.

Now I think when afterSubmit returns an id,grid should its new id regardless whethere postdata[id] is null or not, it should just overwrite it.

Please let me know if there is any other way of fixing this.