Options for selecting multiple rows and individual rows - asp.net-mvc-3

Question

I am using JQGrid and I want an option for multiple selection of rows. I used " multiselect: true," but it is not working. Yes I have got an column in the grid that have checkbox in each row but if I select top checkbox which is in header , it just selects first row from grid
Even single selection of row is not working properly. If checked at one checkbox, it selects and then if I check another box in the another row, it unchecks the first checked checkbox.
Here is my grid Code.
$(document).ready(function () {
$("#btnGetdetails").click(function () {
bindReports();
});
var bindReports = function () {
$('#list1').jqGrid('GridUnload');
$("#list1").jqGrid({
url: "GetNotesReportDetails",
postData: { startDate: $('#startDate').val(), endDate: $('#endDate').val(), ins_Type: $("#InsuranceType").val(), ass_Clincian: $("#ddlAssignedClician").val() },
datatype: "json",
mtype: "POST",
colNames: ["ID", "#", "First Name", "Last Name", "Date Of Birth", "Date of Visit", "Insurance Type", "Insurance ID","Clinician" ,"Procedure Code", "Fee Schedule"],
colModel: [
{ name: "ID", index: "ID", hidden: true, key: true },
{ name: "SNo", index: "SNo", width: 10, align: "left" },
{ name: "FirstName", index: "FirstName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
{ name: "LastName", index: "LastName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
{ name: "DateofBirth", index: "DateofBirth", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
{ name: "DateofVisit", index: "DateofVisit", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
{ name: "PageType", index: "PageType", width: 40, align: "left", sortable: true },
{ name: "InsuranceID", index: "InsuranceID", width: 50, align: "left", sortable: true },
{ name: "Clinician", index: "Clinician", width: 50, align: "left", sortable: true },
{ name: "ProcedureCode", index: "ProcedureCode", width: 50, align: "left", sortable: true },
{ name: "CodeFee", index: "CodeFee", width: 50, align: "left", sortable: true }],
// Grid total width and height
multiselect: true,
rowNum: 20,
rowList: [5, 10, 15, 20],
width: 900,
height: "100%",
// Paging
pager: $("#pager1"),
viewrecords: true,
// Default sorting
//sortname: "FirstName",
sortorder: "asc",
sortable: true,
loadonce: true,
hidegrid: false,
// Grid caption
caption: "Reports List"
}).navGrid("#pager1", { refresh: false, excel: true, add: false, edit: false, del: false }, {}, // settings for edit
{}, // settings for add
{}, // settings for delete
{ sopt: ["cn"] } // Search options. Some options can be set on column level
).jqGrid('navButtonAdd', '#pager1', {
caption: "Export to Excel",
buttonicon: "ui-icon-bookmark",
onClickButton: genGraph,
position: "last"
});
}
});

Answer 1

Probably you have problem in your data. You used key: true for the column ID. It means that jqGrid will assign the value of id attribute of every row (id of <tr> element) with the value from ID column. If you would have the same values in ID column instead of providing unique values you would have exact the same behavior like you described in your question. If jqGrid will need to select or unselect an row then it will search the row by id. It will find the first row with the id if one have more as one row with the id. So it will select/unselect the first row in the grid in many cases.