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?

Renal

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...
        });
    });

Dibbrun

@Justin Great answer!! Thanks, if it was my question, I'd give you the tick. – Xe

You're welcome! Its a shame this question is so old, but hopefully the answer can still be helpful :) – Dibbrun

Well is kinda old - I virtually re-wrote it. – Xe

There is a bit of an issue with the code, which I am attempting to deal with now, if the user selects the cell before hand and then checks (Or unchecks) the checkbox, it attempts to fire the cellEdit event and access the cellUrl. If one isn't defined, it throws a message saying missing otherwise it will run the event. This then makes it difficult to handle if you have a on click function checking and the standard jqgrid model function attempting to save the details. I'm going to look a but further if there is something slightly more elegant and will fire the jqgrid cell edit in both cases. – Typewrite

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.

Thingumajig

How would you handle the case where there is more than one checkbox column in each row? – Anthropo

@user1334007 It really depends on what you're doing.If you're using the inline editing functionality of the grid you can still use the above and identify which one was clicked by getting it's ID.By default, jqGrid sets the checkbox ID as "[rowid]_[colname]".So from the ID of the checkbox you'll be able to know on which row/column the checkbox is. – Thingumajig

@user1334007 another solution is to change the selector a bit to add the column name and create an handler per column. Honestly I don't think this is necessary and the fewer event listeners you have the better. – Thingumajig

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.

Widespread

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.

Siva

Thanks Richard, but I found this didn't quite work. My checkbox is in the 1st column of my jqGrid, but if a user clicked within a cell in that 1st column, but not on the checkbox itself, then this code would incorrectly trigger the "checkbox value has changed" function. What did work for me was this: $('#jqGrid').on('change', ':checkbox', function (e) { } ); – Reckless

Answer 5

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

Cottbus

Answer 6

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

Luminance