Implement Delete In jQgrid

Question

i\'m starter in jqGrid, i want Implement Delete Actin in jqGrid I writing this Code For Fill jqGrid

$(function () {
    var grid = $(\'#list\');
    grid.jqG         


        

Answer 1

I suppose that the origin of your problem is that you fill rowids of the grid not correctly. Probably you do fill ids of the rows of the grid correctly, but just don't use the information.

By the way you use Action parameter with the value "Insert", "Update" and "Delete". On the other side there are already standard parameter oper which will be sent to the server (see here) during the row editing. The value of oper parameter will be "add", "edit" and "del". So I see no need to use additional Action parameter during editing. I recommend you just to test for the value of oper parameter instead.

If you do like to have another name and values of oper parameter you can use prmNames option of jqGrid to change the defaults:

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

I don't see any sense in the usage of ActionPage=TransportType additional parameter which you use in all URLs. If you do require to share the same URL "jQGridHandler.ashx" for some other purpose you can use editurl: "jQGridHandler.ashx" and add ActionPage=TransportType part to URLs using postData, editData and delData parameters.

In the same way with oper parameter one more parameter with the name id will be send to the server during the editing operations. So you can use request["TRANSPORT_ID"] on the server side. If you prefer another name (I don't see that it's really required) you can add id: "TRANSPORT_ID" property in prmNames. It will solve your main problem.

So if you don't want to make any modifications in the server code you can just 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 defaults (see here) for colModel items.

One more important thing in your code which make a problem. You use reloadAfterSubmit: false setting. In the case it's important to return the id on the new created item in the response from the server on "Insert" operation. So use should use response.Write(output); to write in the body of the server response the id. Additionally you need use afterSubmit (see the answer) to get the new id from the server response and forward it to 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 the demo project from here.