Unable to handle checkbox click event in jqGrid

Question

I am using jqGrid for some purpose. In this grid there are 6 columns in which last columns is just integer value (NoLicense-available license count) and last 2nd is checkbox.

I want to make following functionality using this grid.

If checkbox is tick then value of NoLicense must be NoLicense++;

2 if the same checkbox is untick then value of NoLicense must be NoLicense--;
If NoLicense=0 then alert('License exhausted');

Below is my code:

    $.ajax({
    type: "POST",
    url: url,
    data: param,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (xhr, status, error) {
        try {
            var msg = JSON.parse(xhr.responseText);
            $(this).MessageBox('error', msg.Message);
        }
        catch (e) {
            $(this).MessageBox('error', xhr.responseText);
        }
        return false;
        $(this).HideBusy();
    },
    success: function (data) {
        var xmlString = data.d;
        if (xmlString != '') {
            $("#AvailableLicense").jqGrid({
                ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
                datatype: 'xmlstring',
                datastr: xmlString,
                xmlReader: { root: "AvailableLicenses", row: "row", repeatitems: false, id: "ItemCode" },
                colNames: ['Code', 'Name', 'Profile Name', 'Expires On', 'Used', 'Available'],
                colModel: [

                            { name: 'ItemCode', index: 'TenantConfID', align: "left", width: 40 },
                            { name: 'Itemname', index: 'ObjectTypeID', align: "left", width: 40 },
                            { name: 'ProfileName', index: 'CRMObjectTypeID', align: "left", width: 20 },
                            { name: 'EndDate', index: 'SAPObjectTypeID', align: "left", width: 40, formatter: 'date', formatoptions: { srcformat: 'Y/m/d', newformat: 'd-m-Y'} },
                            { name: 'Used', index: 'Used', align: "center", width: 20, editable: true, edittype: 'checkbox', formatter: 'checkbox',
                                editoptions: { value: "1:0", readonly: false }
                            },
                            { name: 'U_NoUsers', index: 'SAPObjectText', align: "center", width: 40 }
                         ],
                onSelectRow: function (rowid, status, e) {
                    UserRowID = $("#ClientUsers").jqGrid('getGridParam', 'selrow');
                    debugger;
                    if (UserRowID != null) {
                        selectedRowId = $("#AvailableLicense").jqGrid('getGridParam', 'selrow');
                        $('#AvailableLicense').jqGrid('editRow', selectedRowId, true);
                        var $target = $(e.target), $td = $target.closest("td"),
                        iCol = $.jgrid.getCellIndex($td[0]),
                        colModel = $(this).jqGrid("getGridParam", "colModel");
                        if (iCol >= 0 && $target.is(":checkbox")) {
                            var Count = $("#AvailableLicense").jqGrid('getCell', selectedRowId, 'U_NoUsers');
                            var Used = $("#AvailableLicense").jqGrid('getCell', selectedRowId, 'Used');
                            if (Used == '1') {
                                if (Count > 0) {
                                    Count = Count - 1;
                                    var rowData = $('#AvailableLicense').jqGrid('getRowData', selectedRowId);
                                    rowData.U_NoUsers = Count;
                                    $('#AvailableLicense').jqGrid('setRowData', selectedRowId, rowData);
                                }
                                else
                                    $(this).MessageBox('error', 'License Exhausted');
                            }
                            else {
                                Count = Count + 1;
                                var rowData = $('#AvailableLicense').jqGrid('getRowData', selectedRowId);
                                rowData.U_NoUsers = Count;
                                $('#AvailableLicense').jqGrid('setRowData', selectedRowId, rowData);

                            }


                        }
                        return true;
                    }
                    else
                        $(this).MessageBox('error', 'Please select user first');
                },
                rowNum: 10,
                mtype: 'POST',
                pager: "#AvailableLicenseMap",
                gridview: true,
                rownumbers: true,
                loadonce: true, forceFit: true,
                width: 600,
                height: 250,
                caption: 'Available License'
            }).jqGrid('navGrid', '#AvailableLicenseMap', { edit: false, add: false, del: false, search: false }); //.trigger('reloadGrid') ;

        }
    }
});

But I found that rowselectevent does not works properly when I tick the checkbox. 1. When I select the first row event fires. 2. When I reselect the same row it does not fire. 3. After selecting the row If I change the value of checkbox, it doesn't fire event.

May be I don't understand it properly.

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 11:45

It seem to me that you could simplify your code by usage formatoptions: { disabled: false } in the column 'Used' having formatter: 'checkbox'. In the case you don't need to use any editing mode at all. To make actions on checking/unckecking of the checkbox from the column 'Used' one can use beforeSelectRow callback. Look at the demo which I created for the answer. The demo tests for the click inside of the column closed (you need change closed to Used of cause). To make some actions in case of clicking on the checkboxs only one need to change the line if (cm[iCol].name === "closed") { to if (cm[iCol].name === "Used" && e.target.tagName.toUpperCase() === "INPUT") {

Unable to handle checkbox click event in jqGrid

1 Answers1