jqGrid with ASP.NET MVC Basics Displaying No Data - jqgrid

Question

I've had about 3 goes at trying to learn the jqGrid. Every time has failed. So this time I tried to start with the basics. All I wanted to do was replicate the json data example at http://trirand.com/blog/jqgrid/jqgrid.html .
My best efforts have resulted in a table with rows and columns by every cell has a non-breaking space in it.
With my code, I only departed from the code in that example in the slightest way to account for the fact that I wasn't getting the data from the same data service. But I was getting the exact same data as I was able to extract the json using fiddler.
The code is:
function getData() {
var obj =
{
"page": "1",
"total": 2,
"records": "13",
"rows": [{
"id": "13",
"cell": ["13",
"2007-10-06",
"Client 3",
"1000.00",
"0.00",
"1000.00",
null]
},
{
"id": "12",
"cell": ["12",
"2007-10-06",
"Client 2",
"700.00",
"140.00",
"840.00",
null]
},
{
"id": "11",
"cell": ["11",
"2007-10-06",
"Client 1",
"600.00",
"120.00",
"720.00",
null]
},
{
"id": "10",
"cell": ["10",
"2007-10-06",
"Client 2",
"100.00",
"20.00",
"120.00",
null]
},
{
"id": "9",
"cell": ["9",
"2007-10-06",
"Client 1",
"200.00",
"40.00",
"240.00",
null]
},
{
"id": "8",
"cell": ["8",
"2007-10-06",
"Client 3",
"200.00",
"0.00",
"200.00",
null]
},
{
"id": "7",
"cell": ["7",
"2007-10-05",
"Client 2",
"120.00",
"12.00",
"134.00",
null]
},
{
"id": "6",
"cell": ["6",
"2007-10-05",
"Client 1",
"50.00",
"10.00",
"60.00",
""]
},
{
"id": "5",
"cell": ["5",
"2007-10-05",
"Client 3",
"100.00",
"0.00",
"100.00",
"no tax at all"]
},
{
"id": "4",
"cell": ["4",
"2007-10-04",
"Client 3",
"150.00",
"0.00",
"150.00",
"no tax"]
}],
"userdata": {
"amount": 3220,
"tax": 342,
"total": 3564,
"name": "Totals:"
}
}
return obj;
}
$(function () {
$("#list2").jqGrid({
data: getData()['rows'],
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name asc, invdate', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right" },
{ name: 'tax', index: 'tax', width: 80, align: "right" },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example"
});
$("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
});
Can anyone please help me break my really bad run with this popular javascript library?

Answer 1

I don't find anything wrong with your grid. There is something wrong with your data. I hope your data need to be checked. Also if you are using local as your datatype your data should like below,
var mydata = [
{ id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00"
, tax:"120.00", total:"720.00", note: null },
{ id: "12", invdate: "2007-10-06", name: "Client 2", amount: "700.00",
tax:"140.00", total:"840.00", note: null },
{ id: "13", invdate: "2007-10-06", name: "Client 3", amount: "1000.00",
tax:"0.00", total:"1000.00", note: null }
];
This Demo will give you the good start with jQgrid. I have used your grid definition. Hope this helps.