jqGrid with an editable checkbox column

Question

When using jqGrid how do you force a cell to load in its editable view on page load as well as when it is clicked?

If you set up 'cell editing' like below, the check box only appears when you click on the cell.

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },

cellEdit:true,

Also on clicking checkbox, is there a way of sending a AJAX post to server instantly rather than having to rely on the user pressing enter?

Answer 1

To allow the checkboxes to always be click-able, use 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 your second question, you will have to setup an event handler for the checkboxes, such that when one is clicked a function is called to, for example, send an AJAX POST to the server. Here is some example code to get 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...
        });
    });

Answer 2

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

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

Just add the following:

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

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

Answer 3

I had the same problem and I suppose that I found a good solution to handle checkbox click immediately. The main idea is to trigger editCell method when user clicks on the 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 this, you should define events for your 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 every time when user clicks on it.

Answer 4

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

I resolved this problem using this code:

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

Then I mixed with values got from the code below.

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

I hope it helps someone.

Answer 5

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}, 
...

Answer 6

I had shared a full code at the link below, you 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