jqGrid with an editable checkbox column

By : dev
Source: Stackoverflow.com
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?

By : dev


Answers

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.



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.



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



This video can help you solving your question :)
By: admin