7

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">
Oleg
  • 220,925
  • 34
  • 403
  • 798
London
  • 14,986
  • 35
  • 106
  • 147

3 Answers3

7

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.

hyperslug
  • 3,473
  • 1
  • 28
  • 29
5

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Why do you need the "each" ? Is it to disable based on the value when it's loaded, but before any user interaction ? – dtroy May 16 '13 at 13:57
  • 1
    @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](http://stackoverflow.com/a/14537512/315935) and [the answer](http://stackoverflow.com/a/13765086/315935). – Oleg May 16 '13 at 14:58
  • Oleg, youre the JQGrid savior! :) – will824 Dec 12 '13 at 22:49
  • @will824: Thanks! I'm glad if my answers could help you. – Oleg Dec 12 '13 at 22:59
  • @Oleg 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 – will824 Dec 13 '13 at 17:06
2

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);
    });
Mike
  • 21
  • 1