jqGrid does not bind json rows.

Question

I am using jqGrid by Trirand. The grid headers, rows, paging is displayed correctly but the data rows are not populated. I have gone through many posts and tried many solutions, but it simply won't work. I'm sure there some thing very simple that is missing but I am unable to figure it out.

I am getting the following response from my ASP.NET MVC Controller:

{ "total":1, "page":1, "records":2, "rows": [ { "Id":"1", "StudentName":"Student1" }, { "Id":"2", "StudentName":"Student2" } ] }

And the jqGrid code is as follows:

$(function () {

$("#jqGrid").jqGrid({

    url: '/Home/GetStudentsLists',
    dataType: "json",
    mtype: 'GET',
    colNames: ['Id', 'StudentName'],
    colModel: [
        { name: 'Id', index: 'Id', width: 60 },
        { name: 'StudentName', index: 'StudentName', width: 60 }
    ],        
    rowNum: 9999,
    sortname: 'Id',
    loadonce: true,
    rowList: [10, 20, 30],
    pager: '#jqpager',
    viewrecords: true,
    sortorder: "desc",
    caption: "Students Details",
    height: 100,
    autowidth: true        
}) });

and the Layout page that contains the script tags looks like following:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    ...
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.10.0.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.js"></script>
    <script src="~/Scripts/Custom/jQGridStudents.js"></script>
</body>

I appreciate your help.

Which version of jqGrid you use (or can use) and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7)? If you use not "free jqGrid" then you have to fix dataType: "json" to datatype: "json". It should be your main problem. Other recommendation in your code would depend on the version and fork of jqGrid, which you use. — Oleg
Thank you so much. I'm using jquery.jqGrid by Trirand, version 4.4.4, and jquery version 3.1.1 available on nuget, and I can use any of these grids you have mentioned. Secondly, I think you have written dataType: "json" twice in your comment. See text above [dataType: "json" to dataType: "json"]. — Muhammad Imran Khan
JavaScript is case sensitive and datatype is not the same as dataType (with capical T). The version 4.4.4 is 4.5 years old and it's dead since a long time. If you use NuGet, then I recommend you uninstall old packge and to use free-jqGrid. Alternatively I recommend you to consider to load free jqGrid from CDN. See here and here. — Oleg

Muhammad Imran Khan Muhammad Imran Khan · Accepted Answer · 2017-08-03T05:22:37

So Oleg here helped me find the problem. Thanks for your help Oleg.

The problem was due to a simple typo where I wrote dataType instead of datatyppe. Everything started working as soon as I changed dataType to datatype.

Secondly, the jqgrid I'm using was too old, so I am gonna go with the latest one as mentioned above in comments by Oleg.

jqGrid does not bind json rows.

1 Answers