Search code examples
jqueryjquery-pluginsjqgridjqgrid-formatter

How to pass extra parameters while using jqGrid 'actions' predefined formatter?


I am using jqGrid v3.8.1 and having trouble passing extra parameters with the predefined formatter 'actions'. Basically I want to pass two parameters along with the edited fields while editing as well as deleting. As per the documentation, extraparam can be used to post additional parameters to the server. I've tried everything I could and researched as much as I could but, I'm still not able to get this to work. I've referred the following:

Link 1
Link 2

and others on stackoverflow and elsewhere. I'm not sure what is going wrong.

Following is my code. Please help me out.

jQuery("#configGrid").jqGrid({
    mtype: "post",
    url: '/Controller/Action',
    datatype: "json",
    colNames: ['Location', 'S_No', 'S_C', 'D_No', 'D_C', 'B_No', 'B_C', 'G_No', 'GP_P', 'IP', 'OA', 'NA', 'Months', 'Edit'],
    colModel: [{
        name: 'name',
        index: 'name',
        width: 90
    }, {
        name: 's_no',
        index: 's_no',
        width: 90,
        align: "center",
        editable: false
    }, {
        name: 's_c',
        index: 's_c',
        width: 90,
        align: "center",
        editable: true
    }, {
        name: 'd_no',
        index: 'd_no',
        width: 90,
        align: "center",
        editable: false
    }, {
        name: 'd_c',
        index: 'd_c',
        width: 90,
        align: "center",
        editable: true
    }, {
        name: 'b_no',
        index: 'b_no',
        width: 90,
        align: "center",
        editable: false
    }, {
        name: 'b_c',
        index: 'b_c',
        width: 90,
        align: "center",
        editable: true
    }, {
        name: 'g_no',
        index: 'g_no',
        width: 100,
        align: "center",
        editable: false
    }, {
        name: 'g_c',
        index: 'g_c',
        width: 100,
        align: "center",
        editable: true
    }, {
        name: 'TIP',
        index: 'TIP',
        width: 80,
        align: "right",
        editable: true
    }, {
        name: 'OA',
        index: 'OA',
        width: 80,
        align: "center",
        editable: true
    }, {
        name: 'NA',
        index: 'NA',
        width: 80,
        align: "center",
        editable: true
    }, {
        name: 'Months',
        index: 'Months',
        width: 150,
        align: "center",
        sortable: false,
        editable: true
    }, {
        name: 'myac',
        width: 50,
        align: "center",
        fixed: true,
        sortable: false,
        resize: false,
        formatter: 'actions',
        formatoptions: {
            keys: true,
            extraparam: {
                slot: "1",
                installment: "1"
            }
        }
    }],
    rowNum: 10,
    rownumbers: true,
    autowidth: true,
    rowList: [10, 20, 30],
    postData: {
        level: function () {
            if (p_level == undefined || p_level == null) {
                return 'S';
            } else {
                return p_level;
            }
        },
        location: function () {
            return p_location;
        },
        ownLower: function () {
            return flagOwnLower;
        },
        slot: function () {
            return $("#ddlSlot").val();
        },
        installment: function () {
            return $("#ddlInstallment").val();
        }
    },
    loadError: function (xhr, status, error) {
        $('#ErrorMessage').html(xhr.responseText);
        $('#ui-widget').show();
        $("#ErrorMessage").stop().show('slow');
    },
    //loadonce: true,
    pager: '#configPager',
    sortname: 'invdate',
    viewrecords: true,
    sortorder: "desc",
    //jsonReader: { repeatitems: false },
    caption: "caption",
    height: '100%',
    editurl: '/Controller/UpdateAction/' + Math.random(),
    multiselect: true,
    loadComplete: function () {
        $('#ErrorMessage').html("");
        $('#ui-widget').hide();
        $("#ErrorMessage").stop().hide('slow');

        gridLoaded = true;
    },
    onSelectRow: function (rowId) {

        //tried this but it is not working
        //jQuery("#frmac").editRow(rowId, true, null, null, '/Action/Controller/' + Math.random(), { slot: $("#ddlSlot").val(), installment: $("#ddlInstallment").val() });
    }
});

Solution

  • The change log mentions that predefined formatter 'actions' was introduced in v3.8.2. Even though I'm using v3.8.1 it allowed me to use the 'actions' formatter and few of it's properties like keys, editbutton and deletebutton (I didn't try the others) but, was not supporting extraparam, onEdit, onSearch. I upgraded to v3.8.2 and my issue was resolved.