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 = "[email protected]"
            }
        );



        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.

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.

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");

            });

        });

Answer 1

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>