Johny Bravo Johny Bravo - 5 months ago 63
jQuery Question

JqGrid not displaying data MVC

please check the jqgrid I am having, it just displays blank grid, my json is according to the expected format of grid. I am using jqGrid 4.4.4

<script type="text/javascript">
$(function () {
$("#myGrid").jqGrid({
url: '/Home/GetData/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['CP', 'Val1', 'Val2', 'Val3'],
colModel: [
{ name: 'CP', index: 'CP', width: 150 },
{ name: 'Val1', index: 'Val1', width: 150 },
{ name: 'Val2', index: 'Val2', width: 150 },
{ name: 'Val3', index: 'Val3', width: 150 }
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager',
sortname: 'CP',
viewrecords: true,

sortorder: "asc",

viewrecords: true,

caption: "JSON Example"
});
$("#myGrid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });

});

</script>


My controller method looks like, where I am formatting data as per jqGrid documentation.

[HttpGet]
public JsonResult GetData()
{
List<Rate> myList = CallProcedure<Rate>("getVal").ToList();


var jsonData = new
{
total = myList .Count,
page = 1,
records = 10,
rows = (
from d in myList
select new
{
id = d.CP,
cell = new string[] {
d.CP.ToString(),
d.Val1.ToString(),
d.Val2.ToString(),
d.Val3.ToString()
}
}).ToArray()
};



return Json(jsonData, JsonRequestBehavior.AllowGet);
}


Tried with setting jsonReader in the grid but still no success, can you please point where I am going wrong here? Thanks in advance

Json look like below

{
"total": 1,
"page": 1,
"records": 25,
"rows": [{
"id": "AUSD",
"cell": ["AUSD ", "0.000000", "0.72315000", "0.000000"]
}, {
"id": "PPFF",
"cell": ["PPFF ", "0.000000", "1.10288000", "0.000000"]
}, {
"id": "XTYU",
"cell": ["XTYU ", "0.000000", "1.41479000", "0.000000"]
}, {
"id": "NUSD",
"cell": ["NUSD ", "-0.000020", "0.67097000", "-0.000020"]
}, {
"id": "USED",
"cell": ["USED ", "0.000000", "3.67278000", "0.000000"]
}, {
"id": "UAD",
"cell": ["UAD ", "0.000120", "1.37037000", "0.000020"]
}]
}


New json look like,

{
"total": 1,
"page": 1,
"records": 25,
"rows": [
["Val1 ", "0.000000", "0.72315000", "0.000000"],
["Val12 ", "0.000000", "1.10288000", "0.000000"],
["Val13 ", "0.000000", "1.41479000", "0.000000"],
["Val14 ", "-0.000020", "0.67097000", "-0.000020"],
["Val15 ", "0.000000", "3.67278000", "0.000000"],
["Val16 ", "0.000120", "1.37037000", "0.000020"],
["Val17 ", "0.000000", "0.99843000", "0.000000"],
["Val18 ", "0.000000", "24.53100000", "0.000000"],
["Val19 ", "0.000000", "6.76500000", "0.000000"],
["Val23 ", "0.000000", "7.77250000", "0.000000"]

]
}


Still the grid is blank :(

Update action method to return json in different format,

{
"total": 25,
"page": 1,
"records": 10,
"rows": [{
"CP": "ADRR",
"Val1": "0.000000",
"Val2": "0.72315000",
"Val3": "0.000000"
}, {
"CP": "TRRT",
"Val1": "0.000000",
"Val2": "1.10288000",
"Val3": "0.000000"
}, {
"CP": "TRER",
"Val1": "0.000000",
"Val2": "1.41479000",
"Val3": "0.000000"
}]
}


The difference in the json is it contains " for "CP", "Val1" names. And the grid is still blank

What's wrong here? The breakpoint comes here when the page loads, it treturns the json as expected,

public JsonResult GetData()
{
List<Live> dd = CallProc<Live>("getLiveData").ToList();


var jsonData = new
{
total = 1,
page = 1,
records = dd.Count,
rows = (
from d in dd
select new string[]
{
CP = d.CP.ToString(),
CP1 = d.CP1.ToString(),
CP2 = d.CP2.ToString(),
Cp3 = d.Cp3.ToString()
}).ToArray()

};


string json = new JavaScriptSerializer().Serialize(jsonData); //just to check what json I am getting

return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Answer

What I suggest in my comment is that:

  {
"total": 1,
"page": 1,
"records": 25,
"rows": [["AUSD    ", "0.000000", "0.72315000", "0.000000"], 
         ["2", "PPFF    ", "0.000000", "1.10288000", "0.000000"],
         ["XTYU    ", "0.000000", "1.41479000", "0.000000"]

] }

I alreay get issues with multiple grid regarding JSON result and it solved them.