jqGrid not rendering data - Headers visible

Question

While playing around with jqGrid, I ran into the following issue. The data in jqGrid is not getting rendered. Even though I am able to see the header of the grid with all the columns but the data does not appear. I am returning the data from an action method of the controller in a JSON format.

<script type="text/javascript">
        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {
                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [
                        //{ name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    //loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        root: "rows",
                        page: "page",
                        id: 0

                    }
                });
                alert("complete - success");
           });

        });


 </script>

Action method in the controller:

public JsonResult ContactList()
    {
        List<Contact> contacts = new List<Contact>();

        contacts.Add ( new Contact()
            {
                FirstName = "John",
                LastName = "Doe",
                Email = "john.doe@gmail.com"
            }
        );



        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

Network tab output showing the JSON data returned by the call to Action method 'ContactList' as shown in the screen shot below.

enter image description here

The jqGrid header is also being rendered but the data (in JSON format) returned by Controller's Action method is not getting rendered into the jqGrid.

enter image description here

Where am I making a mistake here?

Even after modifying the code as advised by @Oleg in his comment below, the problem persists. There was no error. The alert from 'loadComplete' event popped up.

<script type="text/javascript">

        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {



                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [

                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }
                });
                alert("complete - success");

            });

        });

**which version of jqGrid you use?** I recommend you to add `loadonce: true` option and `loadError` callback (see [the answer](http://stackoverflow.com/a/6969114/315935)). The `jsonReader` which you use contains wrong information. You can remove it if you use not so old version of jqGrid or add `jsonReader: { root: function (obj) { return obj; } }`. — Oleg, May 08 '15 at 20:29
This is what I found at the top of the file "jquery.jqGrid.min.js" - jqGrid 4.4.3 - jQuery Grid — raring sunny, May 08 '15 at 21:55
After running into such issues, I wonder how reliable this grid control is. I can see the response in JSON format, despite that the grid cannot bind it with the data. — raring sunny, May 08 '15 at 22:23
When I click the button for the first time, the data is now successfully loaded into the grid. However, if I re-click the button nothing happens. I expected it to re-load the grid and reload the data also but it does not work that way. Wonder why it behaves this way? — raring sunny, May 08 '15 at 23:09
It's clear, because `$("#ContactTable").jqGrid({...});` **create the grid**. It means that it convert initial empty table into relatively complex structure of dives and tables. You can either create the grid once and the call `$("#ContactTable").trigger("reloadGrid");` later to reload *the body* of the grid or you can add alternatively `$("#ContactTable").jqGrid("GridUnload");` **before** creating the grid. It will destroy jqGrid if any exist. More problem in your code is the usage of no pager. I recommend you to add at least top pager `toppager: true` or to add `rowNum: 1000` (20 is default). — Oleg, May 08 '15 at 23:30

score 2 · Answer 1 · answered May 08 '15 at 22:26

You use very old version. It has no auto-detection of input format. So you have to specify jsonReader which exact corresponds your data. At least two properties of jsonReader are really required:

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; } 
}

The above settings should fix the main problem. Additionally one should understand that jqGrid assign id attribute to every row (every <tr> element). If you would implement later other features of jqGrid (editing for example) you will need to identify the rows by id. So it's strictly recommended to include id property in the input data. If you have native id of the Contact object with another name ("Id" or "ContactId" for example) you can specify the additional id property inside of jsonReader (as id: "Id" or id: "ContactId"). You should include the corresponding property in the server response too.

I would recommend you to consider to update jqGrid to the latest free jqGrid (or at least to free jqGrid 4.8). You can read more about the features of free jqGrid in the readme and in wiki. Free jqGrid is the fork of jqGrid which I develop.

It finally worked! Before I saw your response, I tried the same thing and it worked but thank you so much for the help! You nailed it. — raring sunny, May 08 '15 at 22:51
Will consider upgrading the version. Thanks again for your help! — raring sunny, May 08 '15 at 22:58

score 0 · Accepted Answer · answered May 08 '15 at 22:57

It finally worked. Thank you @Oleg! I saw another post here http://goo.gl/Pg5CMn

Additionally, I figured that I was making another mistake. I forgot to enclose btnContactList in double quotes. After debugging in Internet explorer, I found that out. Secondly, as @Oleg suggested that the jsonReader attribute is required. Probably because of the version of jqGrid that I am using.

<script type="text/javascript">
            $(document).ready(function () {
            //alert("this is a test");
            $("#btnContactList").click(function () {

                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["ID", "First Name", "Last Name", "EMail"],
                    colModel: [
                        { name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        repeatitems: false,
                        //page: function () { return 1; },
                        root: function (obj) { return obj; },
                        //records: function (obj) { return obj.length; }
                    },
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }

                });
                alert("after completion");

            });


        });
</script>

jqGrid not rendering data - Headers visible

2 Answers2

Linked