Displays empty jq grid but displays the data in datatable when debugging

I need to develop a web application which displays ten thousand records using JQ Grid and below is the code that i used to display them what happens is i am getting complete data in data table but it is not displayed in the web page it shows empty without displaying the extracted records but they are seen in data table while debugging how should i display them i am new to the concept of Jq grid can anyone help me out with my mistake that i made

<head runat="server">
<title>jQ Grid In ASP.NET C#</title>
<link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-ui-1.9.2.custom.js"></script>
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/grid.locale-en.js" type="text/javascript"></script>
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>


<script type="text/javascript">

$(function () {
$("#dataGrid").jqGrid({
url: 'Default.aspx/GetDataFromDB',
datatype: 'json',
mtype: 'POST',

serializeGridData: function (postData) {
return JSON.stringify(postData);
},

ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: ['Type', 'Code', 'Value'],
colModel: [
{ name: 'Type', index: 'Type', width: 80 },
{ name: 'Code', index: 'Code', width: 140 },
{ name: 'Value', index: 'Value', width: 160 },
],
pager: '#pagingGrid',
rowNum: 5,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
caption: 'jQ Grid Example'
});
}).pagingGrid("#pager", { edit: true, add: true, del: false });


</script>
</head>
<body style="font-family: Arial; font-size: 10pt">
<table style="border: solid 15px red; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid Example In ASP.NET C#
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: central; padding: 50px;">
<table id="dataGrid" style="text-align: center;"></table>
<div id="pagingGrid"></div>
</td>
</tr>
</table>

</body>


protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source=EHSD208;Database=Training;User Id=sa;Password=Access#123;"))
{
using (SqlCommand cmd = new SqlCommand("SELECT Type,Code,Value FROM Tbl_Observation", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
//return rows;
}
}