How to supply a Row ID when using jqGrid 'editGridRow' to create a new row and not the auto generated Row ID jqg1

Question

I'm new to jqGrid, so hopefully someone can point me in the right direction.

Basically, I am using jgGrid to display a list of dates and costs that I have read in from a file that I want the user to be able to amend or add new entries or delete existing entries. Upon the user clicking an onscreen button "Apply" to post back the form , I read out the jqGrid and post back to Server in the form of a JSON string.

My problem is that when I add new rows (via 'editGridRow'), jqGrid is using it's autogenerated jqg1, jg2, jg3, etc and the new rows are being populated at the top of grid instead of at their row id position i.e at the bottom of grid.

I am able to generate RowID's as necessary, however I do not seem to be able to supply them to 'editGridRow' when creating new entries, instead it appears I have to use the keyword "new".

As you are aware the reason I am using editGridRow instead of addRowData is that editGridRow creates a modal dialog for the user to enter the data.

Any help would be appreciated.

This is what I would like to use to supply a row ID: $("#tableGrid").jqGrid('editGridRow', gridRowID, {reloadAfterSubmit:false});

This is what I have to use to get the code to work: $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});

Here is the code snippet I use for creating the gqGrid in my JSP:

var gridRowID = ${costHistoryEntries}.length

    $("document").ready(function() {

            $("#tableGrid").jqGrid({
                data: ${costHistoryEntries},
                datatype: "local", 
                height: 200, 
                colNames:['Date', 'Cost'],
                colModel:[ 
                        {name:'chdate', index:'chdate', width:110, sorttype:"date", editable:true, editrules:{date:true, required:true, custom:true, custom_func:checkDate}, datefmt:'d/m/Y'}, 
                        {name:'cost', index:'cost', width:160, align:"right", sorttype:"float", editable:true, editrules:{number:true, required:true}, formatter:'float'},
                ],
                autowidth: true,
                loadonce: true,
                sortname: 'chdate',
                sortorder: "desc", 
                rowList:[10, 20, 30],
                pager: jQuery('#tablePager'),
                viewrecords: true,
                editurl: '/myurl',
                caption: "Cost History Entries" }

            ); 

            $("#tableGrid").jqGrid('navGrid', "#tablePager", {edit:true, add:true, del:true, search:true, refresh:true});

            $("#addEntry").click(function() {
                gridRowID++;
                $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});
            });
    });

I also created a button and linked it to "addEntry" as an alternative way to adding a new row using the jqGrid Navigator "add/edit/delete/find/reload" bar. As you can see previous to loading the grid with data I stored the number of entries in gridRowID. What I was hoping to be able to do in the "#addEntry" click function was use the updated gridRowID as a RowID parameter.

As a FYI: In a previous version of the code I was using the following to load the data into the grid:

            var griddata = ${costHistoryEntries};
            for (var i=0; i <= griddata.length; i++) {
                $("#tableGrid").jqGrid('addRowData', i+1, griddata[i], "last");
            }

but found that I could do that same with

data: ${costHistoryEntries},

Both versions correctly create row ID's for the supplied sample data from the server: [{"chdate":"20/05/2011","cost":"0.111"},{"chdate":"01/06/2011","cost":"0.222"},{"chdate":"07/07/2011","cost":"0.333"}]

My problem is adding new rows of data.

Further update, On the server side, as a test I intercepted the post to /myurl and updated the id from "_empty" to "7" but the new entry in jqGrid still has an autogenerated jqGrid Row ID "jqg1":

Key = chdate, Value = 26/09/2011
Key = oper, Value = add
Key = cost, Value = 14
Key = id, Value = _empty

Updated Key = chdate, Value = 26/09/2011
Updated Key = oper, Value = add
Updated Key = cost, Value = 14
Updated Key = id, Value = 7

Answer 1

I am not quite understand your requirement. You get the input for the jqGrid from the server, but use datatype: "local" instead of the datatype: "json" for example which instruct jqGrid to get ajax request to the server to get the data whenever as needed. Moreover you want to save the date on the server, but use editurl: '/dummyurl' instead of the real server url. The editurl would get the input data from the $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false}); and should post back the id of the new generated row. Is it not what you want?

So my suggestion would be to use some server based datatype (the bast is datatype: "json") and in the same way use real editurl which save the data on the server (in the database mostly) and place in the server response the id on the new generated data item.

UPDATED: If you use reloadAfterSubmit: false option of the editGridRow you have to use afterSubmit event handler together with reloadAfterSubmit which decode the server response and return the result in the format [true,'',new_id] For example if your server just return new rowid as the data you can use

$("#tableGrid").jqGrid('editGridRow', "new",
    {
        reloadAfterSubmit: false,
        afterSubmit: function (response) {
            return [true, '', response.responseText];
        }
    }
);