JQGrid Checkbox

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

CSS

.ui-jqgrid-hdiv { overflow-y: hidden; }

JavaScript

var data = [
    {id: 48803, thingy: "DSK1", blank: "", number: "02200220", status: "OPEN"},
    {id: 48769, thingy: "APPR", blank: "", number: "77733337", status: "ENTERED"}
];

function myPrintCheckboxFormatter (cellvalue, options, rowObject) {
    return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow()'>";
}

$("#grid").jqGrid({
    datatype: "local",
    data: data,
    height: "auto",
    gridview: true,
    autoencode: true,
/*   multiselect:true,*/
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status', 'MyPrint'],
    colModel: [{
        name: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        width: 30},
    {
        name: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        width: 80,
        sorttype: "float"},
    {
        name: 'MyPrint',
        width: 80,
        align: "center",
        editoptions: { value: "True:False" },
        editrules: { required: true },
        formatter: "checkbox",
        formatoptions: { disabled: false },
        editable: true  }    
    ],
    caption: "Stack Overflow Example",
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "MyPrint" && e.target.tagName.toUpperCase() === "INPUT") {
            // set local grid data
            localData.MyPrint = $(e.target).is(":checked");
            alert(JSON.stringify(localData));
        }
        
        return true; // allow selection
    }
});