Question

I have a jqGrid with a dropdown. I am filling the dropdown with “custom formatter”(dropDownFormatter1) value.I am getting that, but as per the onchange i need to do some functionality. My main question is how to add the onchange event in my below code.

Here is my code:

$("#grid").jqGrid({
    url: bookingStatusurl,
    datatype: "json",
    shrinkToFit: true,
    colModel: [
        { name: 'BookingStatusID', index: ''BookingStatusID'', hidden: true,
            key: true },
        { name: 'BookingStatus', index: 'BookingStatus', width: 260,
            sortable: false },
        { name: 'NumberOfBooking ', index: 'NumberOfBooking', width: 300,
            sortable: false, align: 'right', formatter: 'currency',
            formatoptions: { prefix: "Number Of Booking: "} },
        { name: 'SortOrderType', index: 'SortOrderType', align: 'right',
            edittype: 'select', formatter: **dropDownFormatter1** }
        //As per the on change of my dropDownFormatter1 by subgrid need to change.
    ],
    rowNum: 40,
    rowList: [40, 80, 120]
    //sortname: 'id',
    viewrecords: true,
    //sortorder: "desc",
    autowidth: true,
    multiselect: false,
    shrinkToFit: true,
    height: 'auto',
    altRows: true,
    subGrid: true,
    //loadonce: false,
    //caption: "Pipeline By Booking Status",
    subGridRowExpanded: function (subgrid_id, row_id) {}
});

Here is the code for cutom formatter:

function dropDownFormatter1(cellvalue, options, rowObject, action) {
   // var statusTypeId = rowObject[0];
    return '<label>Sort Order:</label>' +
        '<select>' +
            '<option value="asc">asc</option>' +
            '<option value="desc">desc</option>' +
        '</select>';
}

Please help me out.

Thanks.

Answer 1

The easiest way to implement onchange callback would be to add onchange attribute in the HTML code which generate your dropDownFormatter1 formatter. You can for example define on the global level your custom JavaScript function

var myOnChangeFormatter1Callback = function (event) {
        var $select = $(this), $tr = $select.closest('tr.jqgrow');

        alert ("the select in the row with id=" + $tr.id +
               " are changed to the option" + $select.val());
    };

To call myOnChangeFormatter1Callback from the onchange one can modify dropDownFormatter1 to the following

function dropDownFormatter1(cellvalue, options, rowObject, action) {
   // var statusTypeId = rowObject[0];
    return '<label>Sort Order:</label>' +
        '<select onchange="myOnChangeFormatter1Callback.call(this, arguments[0]);">' +
            '<option value="asc">asc</option>' +
            '<option value="desc">desc</option>' +
        '</select>';
}

Typically events will be called with event as the name of the first parameter (ad the only) parameter, but in some browsers one should use windows.event instead. So to be more compatible one should use event || windows.event or use just arguments[0] like I did.

If you don’t like to define function with var myOnChangeFormatter1Callback = function (... and will use function myOnChangeFormatter1Callback (... you will be unable to forward this inside of the function at list in strict mode of JavaScript execution. In the case you should forward this as additional parameter and use "myOnChangeFormatter1Callback(this, arguments[0]);" instead of "myOnChangeFormatter1Callback.call(this, arguments[0]);". The prototype of myOnChangeFormatter1Callback should be changed from var myOnChangeFormatter1Callback = function (event) {...} to function myOnChangeFormatter1Callback (myObj, event) {...}.