$(function () {
$("#ListGrid").jqGrid({
url: "/Student/GetStudents",
datatype: 'json',
mtype: 'Get',
colNames: ['StudentId', 'FirstName', 'LastName', 'Age', 'Gender'],
colModel: [
{ key: true, hidden: false, name: 'StudentId', index: 'StudentId', editable: true },
{ key: false, name: 'FirstName', index: 'FirstName', editable: true },
{ key: false, name: 'LastName', index: 'LastName', editable: true },
{ key: false, name: 'Age', index: 'Age', editable: true },
{ key: false, name: 'Gender', index: 'Gender', editable: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: 250,
viewrecords: true,
loadonce: true,
caption: "Student List",
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "LightBlue");
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true })
})