[ACCEPTED]-jqGrid with an editable checkbox column-jqgrid

To allow the checkboxes to always be click-able, use 7 the checkbox formatter's disabled property:

{ name: 'MyCol', index: 'MyCol', 
  editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
  formatter: "checkbox", formatoptions: {disabled : false} , ...

To answer 6 your second question, you will have to setup 5 an event handler for the checkboxes, such 4 that when one is clicked a function is called 3 to, for example, send an AJAX POST to the 2 server. Here is some example code to get 1 you started. You can add this to the loadComplete event:

    // Assuming check box is your only input field:
    jQuery(".jqgrow td input").each(function(){
        jQuery(this).click(function(){
            // POST your data here...
        });
    });

This is an old one but has a lot of view 9 so I decided to add my solution here too.

I'm 8 making use of the .delegate function of 7 JQuery to create a late binding implementation 6 that will free you from the obligation of 5 using the loadComplete event.

Just add the 4 following:

$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });

This will late bind that handler 3 to every checkbox that's on the grid rows. You 2 may have a problem here if you have more 1 than one checkbox column.

I had the same problem and I suppose that 7 I found a good solution to handle checkbox 6 click immediately. The main idea is to trigger 5 editCell method when user clicks on the 4 non-editable checkbox. Here is the code:

        jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
            var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
            var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
            //I use edit-cell class to differ editable and non-editable checkbox
            if(!$(this).parent('td').hasClass('edit-cell')){
                                   //remove "checked" from non-editable checkbox
                $(this).attr('checked',!($(this).attr('checked')));
                        jQuery("#grid").editCell(iRow,iCol,true);
            }
    });

Except 3 this, you should define events for your 2 grid:

            afterEditCell: function(rowid, cellname, value, iRow, iCol){
            //I use cellname, but possibly you need to apply it for each checkbox       
                if(cellname == 'locked'){
                //add "checked" to editable checkbox
                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
                            //trigger request
                    jQuery("#grid").saveCell(iRow,iCol);
                }   
            }, 

            afterSaveCell: function(rowid, cellname, value, iRow, iCol){
                if(cellname == 'locked'){
                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
                }   
            }, 

Then your checkbox will send edit requests 1 every time when user clicks on it.

I have one submit function that sends all 4 grid rows to webserver.

I resolved this problem 3 using this code:

var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
        checkboxFix.push($(this).attr('checked'));
});

Then I mixed with values 2 got from the code below.

$("#jqTable").jqGrid('getGridParam', 'data');

I hope it helps 1 someone.

I had shared a full code at the link below, you 1 can take a look if you need it.

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Better solution:

<script type="text/javascript">
    var boxUnformat = function ( cellvalue, options, cell ) { return '-1'; },
        checkboxTemplate = {width:40, editable:true, 
            edittype: "checkbox", align: "center", unformat: boxUnformat, 
            formatter: "checkbox", editoptions: {"value": "Yes:No"},
            formatoptions: { disabled: false }};
    jQuery(document).ready(function($) {         
        $(document).on('change', 'input[type="checkbox"]', function(e){
            var td = $(this).parent(), tr = $(td).parent(),
                checked = $(this).attr('checked'),
                ids = td.attr('aria-describedby').split('_'),
                grid = $('#'+ids[0]),
                iRow = grid.getInd(tr.attr('id'));
                iCol = tr.find('td').index(td);
            grid.editCell(iRow,iCol,true);
            $('input[type="checkbox"]',td).attr('checked',!checked);
            grid.saveCell(iRow,iCol);
        });
    });
</script>

In your colModel:

...
{name:'allowAccess', template: checkboxTemplate}, 
...

0