jqgrid checkbox change event

Question

I have true/false values in my database. I want to update them with checkbox in jqgrid. Once the value is set to true, it will remain true and should not change. Please take a look at my column model :

{
    name : 'available',
    width : 12,
    resizable: true,
    editable: true,
    align: 'center',
    edittype:'checkbox',
    formatter: "checkbox", formatoptions: {disabled : false},
    classes:'check',
    editrules:{required:false}, editoptions:{size:39,value:"True:False"}
}

I'm trying to capture the event when checkbox is checked, currently they are all unchecked, so far I've tried:

jq(".check input").each(function(){
    jq(this).click(function(){
        aler("works");
    });
});

jq("input[type='checkbox']").change(function(){
    alert("works");
}); 

jq(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = jq(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
        alert("");
    }
});

None of these work, I'm stuck don't know what else to try.

When inspect checkbox code with firebug it looks like this :

<input type="checkbox" offval="no" value="false">

Calabrese

Answer 1

The usage of the custom formatter is one of the possibilities. One can also use unobtrusive style of onclick binding

First one defines

var grid = $("#list"),
    getColumnIndexByName = function(columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
        for (; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    },
    disableIfChecked = function(elem){
        if ($(elem).is(':checked')) {
            $(elem).attr('disabled',true);
        }
    };

Then one can use the in the loadComplete the code like

loadComplete: function() {
    var i=getColumnIndexByName('closed');
    // nth-child need 1-based index so we use (i+1) below
    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",
      this).click(function(e) {
        disableIfChecked(this);
    }).each(function(e) {
        disableIfChecked(this);
    });
}

See the corresponding demo here.

Chasitychasm

Why do you need the "each" ? Is it to disable based on the value when it's loaded, but before any user interaction ? – Severus

@dtroy: The each loop need to call disableIfChecked on each cell from the specified column directly after the content is loaded. The call inside of click call disableIfChecked one more time after the checkbox is clicked. It's an old answer. Now I prefer don't make separate binding to every cell from the column. Look at the answer and the answer. – Chasitychasm

Oleg, youre the JQGrid savior! :) – Horseleech

@will824: Thanks! I'm glad if my answers could help you. – Chasitychasm

@Chasitychasm not only you have helped me but also all our team. We even make some jokes about you being the second hand of JQGrid developer or that if you would disappear we will be in deep trouble :D – Horseleech

Answer 2

You can create a custom formatter. In your grid,

formatter: cboxFormatter,

Then define the function,

function cboxFormatter(cellvalue, options, rowObject)
{
  return '<input type="checkbox"' + (cellvalue ? ' checked="checked"' : '') + 
      'onclick="alert(' + options.rowId + ')"/>';
}

You can use onclick to perform your task or call a function.

Heatherheatherly

Answer 3

This worked for me:

    // Listen for Click Events on the 'Process' check box column
    $(document).on("click", "td[aria-describedby='grdOrders_Process']", function (e) {
        var checked = $(e.target).is(":checked")

        var rowId = $(e.target).closest("tr").attr("id")
        rowData = jQuery("#grdOrders").getRowData(rowId);

        alert("Checked: " + checked)
        alert("OrderNo: " + rowData.OrderNo);
        alert("Name: " + rowData.Name);
    });

Incapacitate