How to implement my own "onCellClick" event handler

Question

In my JQGrid I have check box column and drop Down drop down is created via edittype: 'select' and check boxes are created via "custom formatter" like this edittype: 'checkbox', formatter: returnCheckBox, I want to write my own "onChange" event.

So for I been able to write my "onchange" event for check box and it works fine but when I click some where else (not on check box) in check box cell and click back on check box it stop firing the "onchange" event. I think row select it causing problem how to stop it.

Here is what i am doing

$("#theGrid").jqGrid({
            datatype: 'local',
            sortname: 'value1',
            sortorder: 'desc',
            cellsubmit: 'clientArray',
            editurl: 'clientArray',
            cellEdit: true,
            colNames: ['SName', 'SType', 'DName', 'DType', 'Nullable'],
            colModel: [
                { name: 'SName', index: 'SName', width: 100 },
                { name: 'SType', index: 'Type', width: 100 },
                {
                    name: 'DName',
                    index: 'DName',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:ID;2:Name" },
                },
                {
                    name: 'DType',
                    index: 'DType',
                    width: 100,
                    editable: true,
                    edittype: 'select',
                    editoptions: { value: "1:BigInt;2:VarChar(50)" }
                },
                {
                    name: 'Nullable',
                    index: 'Nullable',
                    width: 100,
                    editable: true,
                    edittype: 'checkbox',
                    //formatter: "checkbox",
                    formatter: checkedStateChange,
                    sortable: false,
                    formatoptions: {disabled : false},
                }
            ]
        });

        var gridData = [
            { SName: 'ID', SType: 'BigInt', DName: 'ID', DType: 'BigInt' },
            { SName: 'Name', SType: 'VarChar(50)', DName: 'Name', DType: 'VarChar(50)' },

        ];

        for (var i = 0; i < gridData.length; i++) {
            $("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
        }
     function checkedStateChange(cellvalue, options, rowObject) {
            return '<input type="checkbox" class="gridCheckBox"/>';
        }
$('.gridCheckBox').on('change',function(){
alert('I am in checkBoxChange method');
});

Answer 1

The code which you posted have really many small problems.

The problem with change exists because of at least two reasons. The first one: you have to place binding to change event inside of loadComplete callback of jqGrid. The current code bind change event only to existing checkboxs on the page. By sorting the grid for example the grid content will be rebuild and new checkboxs will be created. So all old binding will not work more. The next problem is modifying of checkboxs because of cell editing. If you click in the cell with the checkbox the old content will be destroyed and another checkbox will be created on the same place. The checkbox will have no change binding. After the user clicks on another cell the current cell will be saved. So the editing checkbox will be destroyed and new checkbox will be created in the same place with respect of formatter: "checkbox" or formatter: checkedStateChange. As the result the change event handler will be exist on the checkbox.

I personally don't see any reason why you use formatter: checkedStateChange (or formatter: "checkbox" with formatoptions: {disabled : false}) together with cell editing. It makes only problems. Much more consequent would be to use formatter: "checkbox" without formatoptions: {disabled : false} and just to use afterSaveCell callback of cell editing instead of "onchange" event.

Additional problems in your code:

• The usage of name: 'SType', index: 'Type' is wrong because index value have to be the same as name value in case of usage datatype: "local". The current settings will don't make correct sorting or searching in the column SType. I strictly recommend you to remove all index properties from colModel
• You use editoptions: { value: "1:BigInt;2:VarChar(50)" } in the DType column which seend be wrong. Correct value should be editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }. If you need to use value: "1:BigInt;2:VarChar(50)" then the input data should contains 1 and 2 values in DType column and you should use formatter: "select" additionally.
• You can remove colNames option because it contains the same value like the values of name property of colModel.
• You should never fill grid with data using addRowData called in the loop. Instead of that you should just move definition of gridData before creating of jqGrid and include data: gridData option in the grid.
• The grid have no pager. Nevertheless the local paging still work and the pager site is 20 (it's default value of the option rowNum). Using addRowData you can fill more es 20 rows, but if the user click on a column header before starting of cell editing then the grid will be sorted and only the first 20 rows of result will be displayed. If you want to use local paging you have to include rowNum option with some large enough value, like rowNum: 10000.
• It is strictly recommended to use gridview: true option to improve performance of grids and to use autoencode: true option to interpret the input data as pure data and not like HTML fragments. It will protect you from strange errors.
• If colModel which you posted is full then the option sortname: 'value1' is wrong because the input data don't contains value1 property.