JQGrid not showing data. Tried hard no success

Question

Problem is that I can not see any row in the Grid. No matter how hard I tried but no success. FireBug is showing data. May be the problem is Column?

Why I can not see the Data?

Note: if I use array and bind it to Grid than I see the Array data. See at the bottom for local binding.

I am using latest JQGrid js. I think version is 4.1.1. Downloaded today.

*Jason Response -------------------*

{"total":1,"page":1,"records":2,"rows":[{"id":1,"cell":["1","account number","First Name"]},{"id":2,"cell":["2","account number1","First Name1"]}]}

*Razor Page -----------------------------*

     <table id="list"></table> 
            <div id="pager"></div> 

        <link href="/Content/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
        <link href="/Content/custom-theme/ui.jqgrid.css" rel="stylesheet" type="text/css" />

            <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
            <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
            <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
            <script src="/Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
            <script src="/Scripts/jqgrid/i18n/grid.locale-en.js" type="text/javascript"></script>
            <script src="/Scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
            <script src="/Scripts/jqgrid/sandbox-grid.js" type="text/javascript"></script>

[HttpGet]
        public JsonResult GetGrids(string sidx, string sord, int page, int rows)
        {
            var query = from e in _form.All() select e;
            var count = query.Count();

            var result = new
            {
                total = 1,
                page = page,
                records = count,
                rows = query.Select(x => new { x.Id, x.AccountNumber, x.FirstName })
                            .ToList()
                            .Select(x => new
                            {
                                id = x.Id,
                                cell = new string[] {x.Id.ToString(),x.AccountNumber,x.FirstName}
                            }).ToArray(),
            };

            return Json(result, JsonRequestBehavior.AllowGet);

        }


    $(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/Home/GetGrids/',
            mtype: 'GET',
            dataType: 'json',
            colNames: ['Id', 'Account Number', 'Lastname'],
            colModel: [
                { name: 'Id', index: 'Id', width: 200 },
                { name: 'AccountNumber', index: 'AccountNumber', width: 300 },
                { name: 'LastName', index: 'LastName', width: 100 }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'Id',
            viewrecords: true,
            sortorder: "desc",
            caption: "Pay Your Bill"
        });
        jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
    });

Local Binding is working ---------------------------------

var mydata = [
                { Id: "1", name: "test", AccountNumber: "note", LastName: "1sdfd sdfsdf00" },
                { Id: "2", name: "test2", AccountNumber: "note2", LastName: "2sdf sdfdf00" }

            ];

 data: mydata,

datatype: "local",

Answer 1

It seems to me that the main error in the code which you use is

dataType: 'json'

instead of

datatype: 'json'

Because the dataType are unknown by jqGrid, the default value datatype: 'xml' will be used.

UPDATED: I recommend you always implement the loadError event handler. See the UPDATED part of the answer which contain the demo with the VS2008 project or the VS2010 project which is modification of the Phil Haack demo which you use.