Question

 jQuery.extend(
jQuery.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" }, //form editor
    reloadAfterSubmit: true
//        afterSubmit: function (response, postdata) {
//    return [true, "", $.parseJSON(response.responseText).d];
//}
});

$.extend($.jgrid.defaults, {
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    ajaxRowOptions: { contentType: "application/json", type: "POST" },
               //row              inline     editing
    serializeGridData: function(postData) { return JSON.stringify(postData); },
    jsonReader: {
        repeatitems: false,
        id: "0",
        cell: "",
        root: function(obj) { return obj.d.rows; },
        page: function(obj) { return obj.d.page; },
        total: function(obj) { return obj.d.total; },
        records: function(obj) { return obj.d.records; }
    }

});


 $("#grantlist").jqGrid({
            url: 'webservice.asmx/GetGrant',
            colNames: ['ID', 'Name', 'Title'],
            colModel: [
            { name: 'ID', width: 60, sortable: false },
            { name: 'name', width: 210, editable: true },
            { name: 'title', width: 210, editable: true }
            ],
            serializeRowData: function(data) {
                var params = new Object();
                params.ID = 0;
                params.name = data.name;
                params.title = data.title;
                return JSON.stringify({ 'passformvalue': params, 'oper': data.oper, 'id': data.id });
            },
            mtype: "POST",
            sortname: 'ID',
            rowNum: 4,
            height: 80,
            pager: '#pager',
            editurl: "webservice.asmx/ModifyGrant"
        });
        $("#grantlist").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, refresh: false, search: false });
        $("#grantlist").jqGrid('inlineNav', '#pager');

//this is my server code
[WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public JQGrid<GrantComittee> GetGrantComittee(int? page, int? rows, string sidx, string sord, bool _search)
    {
        JQGrid<GrantComittee> jqgrid = new JQGrid<GrantComittee>();

        List<GrantComittee> data = GetGComittee();
        jqgrid.records = data.Count; //total row count
        jqgrid.total = (int)Math.Ceiling((double)data.Count / (double)rows); //number of pages
        jqgrid.page = page.Value;

        //paging
        data = data.Skip(page.Value * rows.Value - rows.Value).Take(rows.Value).ToList();
        foreach(GrantComittee i in data)
            jqgrid.rows.Add(i);


        return jqgrid;


    }

[WebMethod(EnableSession = true), ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public int ModifyGrantComittee(GrantComittee passformvalue, string oper, string id)
    {
        if (String.Compare(id, "_empty", StringComparison.Ordinal) == 0 ||
            String.Compare(oper, "add", StringComparison.Ordinal) == 0)
        {

            GrantComittee data = new GrantComittee();
            List<GrantComittee> set = new List<GrantComittee>();
            set = (List<GrantComittee>)Session["grantcomittee"];
            data = passformvalue;
            data.ID = set.Max(p => p.ID) + 1;
            set.Add(data);
            Session["grantcomittee"] = set;
            return data.ID; 
        }
        else if (String.Compare(oper, "edit", StringComparison.Ordinal) == 0)
        {
            // TODO: modify the data identified by the id
            return 0;
        }
        else if (String.Compare(oper, "del", StringComparison.Ordinal) == 0)
        {
            // TODO: delete the data identified by the id 
            return 0;
        }
        return 0;
    } 

I am using JqGrid to retrieve and add new records to database. So far i have been able to retrieve and add new items to the DB, I am using “json”. I do get in the response {“d”: “5”} for the id of the newly created row in the DB. However the new id does not display in the grid.
How can I update that value to new added row?

Answer 1

I am using ‘inlinNav’ and after adding a new row i was not getting the grid to reload. The solution I found was to add parametes to the ‘inlineNav’ declaration. So I end up with the code i am providing as reference:

$("#grantlist").jqGrid('inlineNav', '#pager', { addParams: { position: "last", addRowParams: {
            "keys": true, "aftersavefunc": function() { var grid = $("#grantlist"); reloadgrid(grid); }
        }
        }, editParams: { "aftersavefunc": function() { var grid = $("#grantlist"); reloadgrid(grid); } }
        });    
function reloadgrid(grid) {
grid.trigger("reloadGrid");

}

I was using more than one grid that is why i pass a grid parameter to the reload function.