Add check boxes in Jquery grid view

Question

I have the following code in page which binds the data to j query grid.

Now i want to add one more column for check-boxes to the existing grid and when i select some check boxes and press some button .. i need to get the selected row values .

I have seen some tutorials for this they mentioned about some formatter .... but they are not clear

Please help me to achieve this.

Thanks in advance.

Code:

$(document).ready(function () {
            $("#btn_GenerateEmpList").click(function () {
                var firstClick = true;
                if (!firstClick) {
                    $("#EmpTable").trigger("reloadGrid");
                }
                firstClick = false;
                var empId=  $("#txt_emp").val();

                $.ajax({
                    type: "POST",
                    url: "PLBased.aspx/GetEmpNames",
                    data: JSON.stringify({ empId: empId}),
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",

                    success: function (result) {

                        result = result.d;
                        jQuery("#EmpTable").jqGrid({
                            datatype: "local",
                            colNames: ['Emp Name'],
                            colModel: [
                                    { name: "EmpName", Index: "EmpName", width: 80 }
                            ],
                            data: JSON.parse(result),
                            rowNum: 10,
                            rowList: [5, 10, 20],
                            pager: '#pager',
                            loadonce: false,
                            viewrecords: true,
                            sortorder: 'asc',
                            gridview: true,
                            autowidth: true,
                            sortname: 'EMPID',
                            height: 'auto',
                            altrows: true,

                        });
                    },
                    error: function (result) {

                        alert("There was some error ");
                    }
                });
            });

        });

Answer 1

Set the option multiselect:true which will add column of checkboxes. Then add

$('#EmpTable').jqGrid('getGridParam', 'selarrrow')

will return an array of selected id's.

Answer 2

You can use customformatter to show checkbox in the column. For this, you can write the code as below in your jqGrid Code.

colNames: ['Id','Emp Name','Emp Checkbox'],
colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'EmpName', Index: 'EmpName', width: 80 },
            { name: 'Empchk', Index: 'Empchk', width: 50, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "true:false" },
                formatter: generateEmpCheckBox, formatoptions: { disabled: false } }
          ], 

formatter function code as below,

function generateEmpCheckBox(cellvalue, options, rowObject) {
    var checkedStr = "";
    if (cellvalue == true) {
        checkedStr = " checked=checked ";
    }
    return '<input type="checkbox" onchange="UpdateEmpcheckbox(' + rowObject.Id + ',this)" value="' + cellvalue + '" ' + checkedStr + '/>';
}

function UpdateEmpcheckbox(selectedId, chkBox) {
    if ($(chkBox).prop("checked")) {
        //you can write an ajax here, to update the server
        //when the checkbox is checked
    }
    else if (!($(chkBox).prop("checked"))) {
          //you can write an ajax here to update the server
          //when the checkbox is unchecked
    }
  return false;
}