jqGrid with ASP.NET MVC Basics Displaying No Data

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.