Implementing Delete in jQgrid

I am guessing that the source of your problem is that you are filling the rows of the grid correctly. You are probably filling in the grid row ids correctly, but you are just not using the information.

By the way, you are using a parameter Action

with a value "Insert"

, "Update"

and "Delete"

. On the other hand, there is already a standard parameter oper

that will be sent to the server (see here ) during line editing. The parameter value oper

will be "add", "edit" and "del". So I don't see the need to use an extra parameter Action

while editing. I recommend that you just check the parameter value oper

.

If you like having a different parameter name and values oper

, you can use the jqGrid prmNames option to change the default values:

prmNames: { oper: "Action", editoper: "Update", addoper: "Insert", deloper: "Delete" }

      

        
        
        
      

    

I see no point in using the extra parameter ActionPage=TransportType

that you use in all urls. If you need to use the same URL "jQGridHandler.ashx"

for some other purpose, you can use editurl: "jQGridHandler.ashx"

and add a ActionPage=TransportType

portion to the URLs using the postData

, editData

and parameters delData

.

In the same way with a parameter, oper

another parameter named id

will be sent to the server during edit operations. This way you can use request["TRANSPORT_ID"]

server side. If you prefer a different name (I don't see that this is really necessary), you can add the property id: "TRANSPORT_ID"

to prmNames

. This will solve your main problem.

So, if you don't want to make any changes to the server code, you can simply do the following on the client side

$(function () {
    var grid = $('#list');
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        editurl: 'jQGridHandler.ashx',
        postData: { ActionPage: 'TransportType', Action: 'Fill' },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: "auto",
        colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
        colModel: [
            { name: 'TRANSPORT_ID', key: true },
            { name: 'TRANSPORT_NAME', width: 200 },
            { name: 'TRANSPORT_ABBR' },
            { name: 'REMARK' }
        ],
        cmTemplate: {width: 100, editable: true},
        prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
            deloper: 'Delete', id: 'TRANSPORT_ID'
        },
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'TRANSPORT_ID',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true
    });
    $.extend($.jgrid.edit, {
        editData: { ActionPage: 'TransportType' },
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterEdit: true,
        closeAfterAdd: true,
        reloadAfterSubmit: false,
        recreateForm: true
    });
    $.extend($.jgrid.del, {
        delData: { ActionPage: 'TransportType', Action: 'Delete' },
        reloadAfterSubmit: false,
        closeOnEscape: true
    });
    $.extend($.jgrid.search, {
        multipleSearch: true,
        recreateFilter: true,
        overlay: false
    });
    grid.jqGrid('navGrid', '#pager', {},
        { height: 300, width: 300, editData: { ActionPage: 'TransportType', Action: 'Update' } },
        { height: 400, width: 500, editData: { ActionPage: 'TransportType', Action: 'Insert' },
            afterSubmit: function (response) {
                return [true, '', response.responseText];
            }},
        {},
        { width: 460 }
    );
});

      

        
        
        
      

    

I added some additional settings and used cmTemplate

to change the default values ​​(see here ) for the elements colModel

.

Another important thing in your code that is causing the problem. You are using a setting reloadAfterSubmit: false

. In case it is important to return id

to the newly created item in the server response to "Insert"

. Therefore, to be used in the server response body, the identifier must be used response.Write(output);

. Also, you need to use afterSubmit

(see answer ) to get the new id from the server response and redirect it to the jqGrid:

grid.jqGrid('navGrid', '#pager', {},
    { height: 300, width: 300, editData: {ActionPage: 'TransportType', Action: 'Update'} },
    { height: 400, width: 500, editData: {ActionPage: 'TransportType', Action: 'Insert'},
        afterSubmit: function (response) {
            return [true, '', response.responseText];
        }},
    {},
    { width: 460 }
);

      

        
        
        
      

    

UPDATED . You can download a demo project from here .