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.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'TransportType', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: 490,
        colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
        colModel: [
            { name: 'TRANSPORT_ID', width: 100, sortable: true, editable: true },
            { name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
            { name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
            { name: 'REMARK', width: 100, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'TRANSPORT_ID',
        viewrecords: true,
        sortorder: 'ASC',
        caption: '',
        rownumbers: true
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
     { height: 300, width: 300, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Update", reloadAfterSubmit: false },
     { height: 400, width: 500, url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Insert", reloadAfterSubmit: false },
     { url: "JQGridHandler.ashx?ActionPage=TransportType&Action=Delete", reloadAfterSubmit: false },
     { multipleSearch: true, overlay: false, width: 460 });

and in jQGridHandler i Write this code

case "TransportType":
    var transport = new TransportTypesBusiness();
    TRANSPORT_TYPES transportItem;
    switch (request.QueryString["Action"])
    {
        case "Fill":
            string numberOfRows = request["rows"];
            string pageIndex = request["page"];
            int totalRecords = 0;
            output = transport.BuildJQGridResults(Int32.Parse(numberOfRows), Int32.Parse(pageIndex), totalRecords);
            response.Write(output);
            break;
        case "FillDrop":
            output = transport.BuildJQGridResults();
            response.Write(output);
            break;
        case "Insert":
            transportItem = new TRANSPORT_TYPES  {
                TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
                TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
                REMARK = request["REMARK"].ToString()
            };
            bool isInsert = transport.AddNew(transportItem);
            break;
        case "Update":
            transportItem = new TRANSPORT_TYPES {
                TRANSPORT_ID = int.Parse(request["TRANSPORT_ID"].ToString()),
                TRANSPORT_NAME = request["TRANSPORT_NAME"].ToString(),
                TRANSPORT_ABBR = request["TRANSPORT_ABBR"].ToString(),
                REMARK = request["REMARK"].ToString()
            };
            bool isUpdate = transport.Update(transportItem);
            break;
        case "Delete":
            bool isDelete =
                transport.Delete(
                    transport.Find(c => c.TRANSPORT_ID == int.Parse(request["TRANSPORT_ID"].ToString())));
            break;
    }

When do I delete a record,I can not get request["TRANSPORT_ID"].ToString() value.

Please help me. thanks all

EDIT 1: i Edit script from this

 $(function () {
            var grid = $('#list');
            grid.jqGrid({
                url: 'jQGridHandler.ashx',
                postData: { ActionPage: 'TransportType', Action: 'Fill' },
                ajaxGridOptions: { cache: false },
                loadonce: true,
                direction: "rtl",
                datatype: 'json',
                height: 490,
                colNames: ['Code', 'TransportType', 'TransportTypeAbbr', 'Remark'],
                colModel: [
                        { name: 'TRANSPORT_ID', key: true,,hidden:true, editable:false },
                        { name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
                        { name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
                        { name: 'REMARK', width: 100, sortable: true, editable: true }
                       ],
                          cmTemplate: { width: 100, editable: true },
                prmNames: { oper: 'Action', editoper: 'Update', addoper: 'Insert',
                    deloper: 'Delete', id: 'STATUS_ID'
                },
                gridview: true,
                rowNum: 20,
                rowList: [20, 40, 60],
                pager: '#pager',
                sortname: 'TRANSPORT_ID',
                viewrecords: true,
                sortorder: 'ASC',
                caption: '',
                rownumbers: true
            });
             $.extend($.jgrid.edit, {
                editData: { ActionPage: 'StatusType' },
                savekey: [true, 13],
                closeOnEscape: true,
                closeAfterEdit: true,
                closeAfterAdd: true,
                reloadAfterSubmit: false,
                recreateForm: true
            });

            grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true },
                    { height: 300, width: 300 },
                    { height: 400, width: 500 },
                    {},
                    { width: 460 });

and in handler for get

ActionPage write this code

 HttpRequest request = context.Request;
        string ss = request["ActionPage"].ToString();

grid first load data but when click in edit button get error.

score 2 · Accepted Answer · edited May 23 '17 at 11:49

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.

@ Oleg : thanks For Help Me but $.expand is not Function and Get undifine Error, Did you mean $.extend function?. please help me — Pouya, Apr 22 '12 at 11:24
@MohsenBahrzadeh: You are welcome! You are right with [$.extend](http://api.jquery.com/jQuery.extend/). I just wrote the code together wither the rest of my answer, so it could contain some typing errors. I'll fix `$.expand` to `$.extend` in my answer. Another thing what I forget to wrote you: if you use `key: true` you can send more compact data in the server response. So you don't need to send the value of `TRANSPORT_ID` twice. You should just use corresponding `jsonReader`. — Oleg, Apr 22 '12 at 11:37
@ oleg: thanks but when in server side want give ActionPage value get error , is ActionPage is undifine, please help me. thanks — Pouya, Apr 29 '12 at 09:57
@MohsenBahrzadeh: Do you tried to use `request["ActionPage"]` where `request` is defined as `HttpRequest request = context.Request`, where `HttpContext context` is the parameter of `ProcessRequest` method of your `IHttpHandler` implementation? — Oleg, Apr 29 '12 at 10:10
@ Oleg : i write this code in Handler: HttpRequest request = context.Request; string ss = request["ActionPage"].ToString(); and when i want get value Action Page get error. — Pouya, Apr 29 '12 at 10:19
I think don't read parameters editData: { ActionPage: 'StatusType' } or delete ,... — Pouya, Apr 29 '12 at 10:21
@MohsenBahrzadeh: Do you get no error in filling of jqGrid? During willing of jqGrid you use HTTP GET so you can use `request.QueryString["Action"]`. For Edit, Add and Delete will be used HTTP POST. So `request.QueryString["Action"]` will be not defined, but if you use `editData: {ActionPage: 'TransportType'}` and `editData: {ActionPage: 'TransportType'}` you should be able to access `ActionPage` by `request["ActionPage"]` — Oleg, Apr 29 '12 at 10:27
@ Oleg : i Add in Question Edit Part , please help me. thanks — Pouya, Apr 29 '12 at 10:36
@MohsenBahrzadeh: Probably the reason is the typing error in the code which I posted: one should use `$.extend` instead of `$.expand`. Moreover I found some syntax errors and that `ActionPage: 'TransportType'` was not used. Moreover to be able to use `$.extend($.jgrid.edit`, ... you have to use **more recent version of jqGrid**. So you should update jqGrid version which you use to the current which you get from the [download page](http://www.trirand.com/blog/?page_id=6). If you will still have some problems I could upload a test VS2010 project for you. — Oleg, Apr 29 '12 at 11:14
@ Oleg : i download new version But my problem is not resolved. I appreciate if you could upload a sample. — Pouya, Apr 29 '12 at 11:25
@ Oleg: Is it possible for you, I will upload the project for you, and you can Check it? — Pouya, Apr 29 '12 at 12:25
@MohsenBahrzadeh: I made demo project for you. You can download the demo from [here](http://www.ok-soft-gmbh.com/jqGrid/jqGridInWebForm1.zip). — Oleg, Apr 29 '12 at 13:12

Implement Delete In jQgrid

1 Answers1

Linked