jqGrid Setting id of new added Row intoGrid

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?

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

In the most cases you don't need to do anything because of default setting reloadAfterSubmit: true. It means that the full grid will be reloaded from the server after the user add new row or modify an existing one.

If you want use reloadAfterSubmit: false setting and the server returns the id of the new created row in the response you need implement afterSubmit callback function which will decode the server response and return it for the usage of by jqGrid. The corresponding code could be about the following:

afterSubmit: function (response, postdata) {
    return [true, "", $.parseJSON(response.responseText).d];
}

You can define the callback by overwriting the default parameters $.jgrid.edit (see here and here).

edited May 23 '17 at 11:56

Community

1
1

answered Feb 02 '12 at 23:10

Oleg

220,925
34
403
798

I wish i could simple use reloadAfterSubmit: true just because it si simple however it doesn't do it for me. this is my defaults; – Manuel Valle Feb 03 '12 at 14:50
Also on firebug i don't see another request after the new row is added to reload the grid!... – Manuel Valle Feb 03 '12 at 14:55
@ManuelValle: I can't test the demo because I don#t have the server code, but I can see that on adding the new row the POST request with the body `{"passformvalue":{"ID":0,"name":"testname","title":"testtitle"},"oper":"add","id":"new_row"}` will be successfully sent. – Oleg Feb 03 '12 at 16:01
Yes, i do send data to the DB fine, and i do get the response with the new row id. However my grid does not reflect the new id right after submission. Even though I have reloadAfterSubmit:true, there is not a request to server to reload data!...When i click a header to sort, it does show the new value!..... – Manuel Valle Feb 03 '12 at 16:05
@ManuelValle: The code which you posted can't be debugged because it's not full. Moreover the stackoverflow is not a help forum where one debugged your programs. The behavior which you describe seems me strange. You should use `jquery.jqGrid.src.js` instead of `jquery.jqGrid.min.js` and debug the code of `editGridRow` near [the lines](https://github.com/tonytomov/jqGrid/blob/v4.3.1/js/grid.formedit.js#L703-738) yourself. You will see why `reloadAfterSubmit` are ignored and `$($t).trigger("reloadGrid");` be not executed. – Oleg Feb 03 '12 at 16:23
Thank you for being so responsive. It realy helps when you are starting with a new widget. I tried debugging, however that part of the code is never reached..Am I missing something in the setup of the grid? – Manuel Valle Feb 03 '12 at 19:34
Still I am not able to reload the grid after adding new row. What is the setup when you using 'inlineNav' for this purpose? I tried form editing and it did reload, however clicking on + with 'inlineNav' does not follow the same path in code... – Manuel Valle Feb 10 '12 at 15:14

Manuel Valle · Accepted Answer · 2012-02-14T17:13:56.097

0

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.

edited Feb 14 '12 at 17:13

answered Feb 10 '12 at 16:37

Manuel Valle

297
8
18

The above code works if you hit enter in the keyboard. If you press the save button on the navigator it will not update the ID.!!! – Manuel Valle Feb 10 '12 at 19:21
To finish the question, the code above now works for both when you hit enter on the keyboard and when you hit save in the 'inlineNav' button....enjoy it. Disregard, previous post line – Manuel Valle Feb 14 '12 at 17:15

jqGrid Setting id of new added Row intoGrid

2 Answers2