Jqgrid not binding after returning json text - json

Question

Unable to bind my JQgrid, below is my code:
Trying to bind some data to jqgrid through controller using Json but not able to bind the grid. attached my code below.
Controller Class:
public class TransactionTypeController : Controller
{
//
// GET: /TransactionType/
public ActionResult Index(EMM_New.Models.TransactionTypeModal TransactionType)
{
List<EMM_New.Models.TransactionTypeEntity> lst = TransactionType.GetTransactionType();
ViewBag.TransactionTypeData = lst;
return View();
}
public ActionResult GetGridData(string sidx, string sord, int page, int rows)
{
return Content(JsonHelper.JsonForJqgrid(GetDataTable(sidx, sord, page, rows), rows, GetTotalCount(), page), "application/json");
}
public DataTable GetDataTable(string sidx, string sord, int page, int pageSize)
{
int startIndex = (page - 1) * pageSize;
int endIndex = page * pageSize;
DataTable table = new DataTable();
table.Columns.Add("CustomerID", typeof(int));
table.Columns.Add("ContactName", typeof(string));
table.Columns.Add("Address", typeof(string));
table.Columns.Add("City", typeof(string));
table.Columns.Add("PostalCode", typeof(string));
//
// Here we add five DataRows.
//
table.Rows.Add(25, "Ramesh", "Combivent", "Bangalore", "463456");
table.Rows.Add(50, "Sam", "Enebrel", "Hosur", "463456");
table.Rows.Add(10, "Christoff", "Hydralazine", "Bangalore", "463456");
table.Rows.Add(21, "Janet", "Combivent", "Hosur", "463456");
table.Rows.Add(100, "Melanie", "Dilantin", "Bangalore", "463456");
return table;
}
public int GetTotalCount() {
return 10;
}
}
JsonHelper Class:
public class JsonHelper
{
public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords, int page)
{
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{");
jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\"");
jsonBuilder.Append(":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{\"i\":" + (i) + ",\"cell\":[");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
}
View:
<table id="list" class="scroll" >
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/TransactionType/GetGridData/',
datatHomeype: 'json',
mtype: 'GET',
colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'],
colModel: [
{ name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left' },
{ name: 'ContactName', index: 'ContactName', width: 150, align: 'left' },
{ name: 'Address', index: 'Address', width: 300, align: 'left' },
{ name: 'City', index: 'City', width: 150, align: 'left' },
{ name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left' }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'CustomerID',
sortorder: "asc",
viewrecords: true,
caption: 'JqGrid from class Binding'
}).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: true });
});
</script>
Able to see the Jqgrid, but data is not populating....What i'm doing worng.Please some help me in sorting this out..

Answer 1

datatHomeype: 'json'?
Should be datatype: 'json'
Try to change your json like this:
{"total":1,"page":"1","records":10,"rows":[{"cell":["25","Ram","Combivent","Bangalore","463456"]}]}