jqGrid additional POST data when deleting row

Question

I need my ro is based on two IDs, Userid and certID. when adding and updating it works fine, but when deleting i need these two IDs to delete my record in the database but all is coming out of the POST data is "id" and "oper", i need to add the additional certId to the post Data. here is my code:

<!DOCTYPE HTML>
<html>
<head>
<title>jQGrid PHP inline Editing Tutorial</title>
    <link type="text/css" rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
<!--<link rel='stylesheet' href='plugins/jqGrid/css/ui.jqgrid.css'/>-->
    <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="plugins/jqGrid/css/ui.jqgrid-bootstrap.css" />

    <script type="text/ecmascript" src="plugins/jquery/jquery-2.1.0.min.js"></script>
    <script type="text/ecmascript" src='plugins/jqGrid/js/i18n/grid.locale-en.js'></script>
    <script type="text/ecmascript" src='plugins/jqGrid/js/jquery.jqGrid.min.js'></script>
    <script type="text/ecmascript" src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/ecmascript" src="plugins/bootstrap-typehead/js/bootstrap3-typeahead.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" />
<meta charset="utf-8" />

<script>
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
</script>
</head>
<body>
<div style="margin-left:20px;">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
    <script type="text/javascript">

$(document).ready(function () {

    $("#jqGrid").jqGrid({
        url: 'getUserCertList.php',
        editurl: 'UserCertUpdate.php',
        mtype: "GET",
        datatype: "json",
        page: 1,
        colModel:   [
                        { label: 'userID',  name: 'id', editable: false, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                        { label: 'certificationid', name: 'certificationid', key: true, editable: false, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                        {
                           label: 'Certification',
                           name: 'certid',
                           width: 200,
                           editable: true,
                           edittype: "select",
                           editrules : { required: true},
                           editoptions : {dataUrl: "getCertList.php"}
                        },
                        {
                            label       :   'Date Certified',
                            name        :   'dateCertified',
                            width       :   80,
                            align       :   'center',
                            editable    :   true,
                            sortable    :   true,
                            sorttype    :   'date',
                            edittype    :   "text",
                            editrules : { required: true},
                            editoptions : {
                            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                                // use it to place a third party control to customize the toolbar
                                dataInit: function (element) {
                                   $(element).datepicker({
                                        autoclose: true,
                                        format: 'yyyy-mm-dd',
                                        orientation : 'auto bottom'
                                    });
                                }
                            }
                        },
                        {
                            label       : 'Verified',
                            name        : 'verified',
                            width       : 40,
                            align       : 'center',
                            sorttype    : "number",
                            editable    : false,
                            edittype    : "checkbox",
                            editoptions : { value: "True:False" },
                            formatter   : "checkbox", formatoptions: { disabled: true }
                        },
                    ],
        loadonce : true,
        //onSelectRow: editRow, // the javascript function to call on row click. will ues to to put the row in edit mode
        viewrecords: true,
        height: 300,
        rowNum: 20,
        rownumbers: true, // show row numbers
        rownumWidth: 35, // the width of the row numbers columns
        pager: "#jqGridPager"
    });

        $('#jqGrid').navGrid("#jqGridPager",    {edit: false, add: false, del: true, refresh: true, view: true, search:false},
                             {delData: {
                                name: function() {
                                        var cert_id = $('#jqGrid').jqGrid('getGridParam', 'selrow');
                                        var value = $('#jqGrid').jqGrid('getCell', cert_id, 'colName');
                                        return value;
                                }
                            }
                   });
        $('#jqGrid').inlineNav('#jqGridPager',{edit: false,add: true,del: true,cancel: true,
                                editParams: {keys: true,},
                                addParams: {keys: true},
                            });


});

    </script>

</body>
</html>

What you use as `id` in the data returned from `getUserCertList.php` (during filling the grid)? You use `key: true` property for `certificationid` column. Thus I can suppose that `certificationid` anong defiles the deleted item on the server side. Can you get `userID` having `certificationid`? — Oleg, Nov 01 '15 at 19:23

score 4 · Accepted Answer · answered Nov 01 '15 at 19:42

The grid have two hidden columns: 'id' (label: 'userID') and 'certificationid' and you use key: true for the 'certificationid' column.

If I correctly understand your question the the combination from two values userID and certificationid specifies the item which need be deleted. In the case it would be better to change the data returned from the server and to use userID + "_" + certificationid as the value for id property in the server response. By the way, the grid don't need to have hidden 'id' column. The id value will be used to assign the value of id properties of rows (<tr> elements). Thus one don't need to save the same information in <td> of the hidden column.

I you can't make the suggested changes on the server side then you can use onclickSubmit callback to extend the data. The code which you posed used delData inside of the options of Edit form, which is wrong:

$('#jqGrid').navGrid("#jqGridPager",
    {edit: false, add: false, del: true, view: true, search: false},
    {}, // edit parameters
    {}, // add parameters
    {   // del parameters
        onclickSubmit: function (options, delId) {
            // get the vale from 'id' (label: 'userID') column
            // and extend the postdata with name property
            return {
                name: $(this).jqGrid('getCell', delId, 'id')
            };
        }
    }
);

Woww that was fast, thanks a lot you are the best. i will make the changes in the code to remove the hidden value of id. — boulepick, Nov 01 '15 at 20:15

jqGrid additional POST data when deleting row

1 Answers1

Linked