Issue in Binding jqGrid from controller ASP.Net MVC 5

Question

My problem is very similar to this issue. I tried the solution he suggested but no luck.

If I remove the serialization then I got error saying:

a circular reference was detected while serializing an object of type 'System.Reflection.RuntimeModule'

If I serialize the data then I get an empty grid. I'm using jQuery grid to bind a DataTable in my application.

public ActionResult FetchData(string item)
{
  Repository o = new Repository();
  DataTable dt = new DataTable();
  dtEDIs = o.GetData(item);

  JsonSerializerSettings jss = new JsonSerializerSettings { 
    ReferenceLoopHandling = ReferenceLoopHandling.Ignore 
  };
  var result = JsonConvert.SerializeObject(dtEDIs, Formatting.Indented, jss);
  var jsonData = new
  {
    total = 10,
    page = 1,
    records = dt.Rows.Count,
    rows = result 
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}

<table id="jQGridDemo"></table>

$("#jQGridDemo").jqGrid({
  url: '/MyController/MyAction',
  datatype: 'json',
  mtype: 'get',
  postData: {
    itemNo: itemNo
  },
  colNames: ['ITEMNO', 'LOC', 'REQDATE'],
  colModel: [{
    name: "ItemNo"
  }, {
    name: "LOC"
  }, {
    name: "REQDATE"
  }],
  height: '100%',
  rowNum: 10,
  viewrecords: true,
  caption: 'JQgrid',
  emptyrecords: 'No records',
  jsonReader: {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: false,
    Id: "0"
  },
  autowidth: true,
});