I have solved this problem and here is the solution:
<script type="text/javascript">
jQuery(document).ready(function () {
$('#btn1').click(function () {
debugger;
$.extend($.jgrid.defaults,
{ datatype: 'json' },
{
ajaxGridOptions: {
contentType: "application/json",
success: function (data, textStatus) {
debugger;
if (textStatus == "success") {
debugger;
var thegrid = $("#contactsList")[0];
var gr = thegrid.rows;
var output = eval(data.d.rows);
var trying;
var newArr = [];
for (trying = 0; trying < output.length; trying++) {
debugger;
newArr.push({
Recognition_Type: output[trying].cell[0],
Recognition_Number: output[trying].cell[1]
});
}
thegrid.addJSONData(newArr);
thegrid.grid.hDiv.loading = false;
switch (thegrid.p.loadui) {
case "disable":
break;
case "enable":
$("#load_" + thegrid.p.id).hide();
break;
case "block":
$("#lui_" + thegrid.p.id).hide();
$("#load_" + thegrid.p.id).hide();
break;
}
}
}
}
});
$("#contactsList").jqGrid({
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: 'WebForm2.aspx/GetDataTable',
datatype: 'json',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Recognition_Type', 'Recognition_Number'],
colModel: [
{ name: 'Recognition_Type', width: 180, align: "center", hidden: false },
{ name: 'Recognition_Number', width: 200, sortable: false, hidden: false }
],
rowNum: 5,
rowList: [5, 20, 300],
pager: "#gridpager",
viewrecords: true,
gridview: true,
rownumbers: true,
height: 230,
caption: 'Reports'
}).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });
})
});
</script>