Having troubles with jqgrid

Question

I am trying to get my data from action method and infact in Fiddler I get the json data but the grid doesn't show anything.

This is my .cshtml:

<script type="text/javascript">
    $(document).ready(function () {

        $('#customers').jqGrid({

            url: '/Home/Customers/',
            dataType: 'json',
            mType: 'POST',
            colNames: ['CustomerID', 'ContactName', 'ContactTitle', 'Country', 'CompanyName', 'Fax', 'Phone'],
            colModel: [
                { name: 'CustomerID', index: 'CustomerID', align: 'left' },
                { name: 'ContactName', index: 'ContactName', align: 'left' },
                { name: 'ContactTitle', index: 'ContactTitle', align: 'left' },
                { name: 'Country', index: 'Country', align: 'left' },
                { name: 'CompanyName', index: 'CompanyName', align: 'left' },
                { name: 'Fax', index: 'Fax', align: 'left' },
                { name: 'Phone', index: 'Phone', align: 'left' },

            ],
            pager: jQuery('#customerPager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'CustomerID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid'
        });

    });
</script>

In _Layout.cshtml, I have reference to scripts and I they all load properly:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/ui-lightness/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

This is my Home controller's action method:

public JsonResult Customers(string sidx, string sord, int page, int rows )
        {
            NorthwindEntities entities = new NorthwindEntities();
            int pageIndex = page - 1;
            int pageSize = rows;
            int totalRecords = entities.Customers.Count();
            int totalPages = (int)Math.Ceiling( (float)totalRecords / pageSize);
            var customers = entities.Customers.OrderBy(k => k.CustomerID).Skip(pageIndex * pageSize).Take(pageSize).ToList();

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = (from customer in customers 
                            select new {
                                    i = customer.CustomerID,
                                    cell = new string[]{customer.CustomerID, customer.ContactName,
                                            customer.ContactTitle, customer.Country, customer.CompanyName,
                                            customer.Fax,
                                            customer.Phone
                                    }
                            }).ToArray()
            };

            return Json(jsonData,JsonRequestBehavior.AllowGet);
        }

Any idea what am I missing?

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

Your main error is that you use wrong case in the jqGrid option names (see the documentation). The dataType: 'json' must be datatype: 'json', the mType: 'POST' must be mtype: 'POST'. Moreover you use very old template for your solution which originate from the Phil Haack demo. One can see that at least from the bug in the controller action: you use i = customer.CustomerID instead of id = customer.CustomerID.

Additionally you should include jquery-ui-1.8.16.min.js instead of jquery-ui-1.8.11.min.js if you use jquery-ui-1.8.16.custom.css. I recommend you to use jQuery 1.6.2. The xxx-vsdoc.js file you can download from the Microsoft page. Be careful with jQuery 1.6.3 some small bug fixes in jqGrid can be required (see here an example).

I recomend you to download my VS2010 demo or VS2008 demo which I described in the answer. The demo is based on the Phil Haack demo, but it's modified so that it support error reporting, searching or toolbar filtering and has some small, but very useful CSS fixes which you need to eliminate small conflicts between the standard ASP.NET MVC CSS and jqGrid CSS.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 10 '11 at 10:42

Oleg

220,925
34
403
798

:D you are awesome with sharp eyes. datatype and mtype did the trick!. Still I will download your solution and see what goodies I can found in it. Thanks anyways Oleg. I wish I could give you few votes more. – TCM Sep 10 '11 at 12:06
@Anthony: You are welcome! The main advantage of the voting is that other people could find the answer better, because the answers high voted are on top on the searching results. So I'm glad that I could help you. If you would find any other answers which gives you new or interesting information just use your voting rights for the answers. It will help other people to find the information. – Oleg Sep 10 '11 at 14:46
It's highly unlikely that I will find so for this question. I've studied your code thorougly and I must be say you have written it beautifully. Absolutely beautiful! – TCM Sep 10 '11 at 15:41

Having troubles with jqgrid

1 Answers1