jqGrid not data display in the grid

Question

In an ASP.NET MVC 3.0 application, I use jqGrid. I use the code below. I see the grid but no data in. I passed in the "GridData" action, the list content is one element but nothing in the grid.

C# :

public ActionResult GridData()
{

    List<Customer> list = new List<Customer>();
    list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

    return Json(list);
}

HTML :

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqgProducts').jqGrid({
            //url from wich data should be requested
            url: '/Customer/GridData/',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'GET',
            //columns names
            colNames: ['Id', 'LastName','FirstName', 'Code'],
            //columns model
            colModel: [
                  { name: 'Id', index: 'Id', align: 'left' },
                  { name: 'LastName', index: 'LastName', align: 'left' },
                  { name: 'FirstName', index: 'FirstName', align: 'left' },
                  { name: 'Code', index: 'Code', align: 'left' }
                ],
            //pager for grid
            pager: $('#jqgpProducts'),
            //number of rows per page
            rowNum: 10,
            //initial sorting column
            sortname: 'Id',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true
        });
    }); 
</script>

Answer 1

We're also using jqGrid in our project. Check these two links: controller(LoadApplicationGrid) and view. And here our JQGridView custom Json result.

Also, you can allow GET method for the Json result using JsonRequestBehavior.AllowGet, then call the action directly from the browser and compare the serialized data with jqGrid requirements.

Answer 2

First of all you should return JSON data from the MVC action using JsonRequestBehavior.AllowGet as the second parameter of jqGrid.

You next and the main problem is the data format. There are default data format which wait jqGrid. The format is described in the documentation. So you can either produce the JSON data in the standard format like suggested you Saad or add jsonReader parameter to the jqGrid which will describe how your current JSON data can be read. So with almost the same GridData:

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };

    return Json (list, JsonRequestBehavior.AllowGet);
}

you can add the following jsonReader parameter

jsonReader: {
    id: "Id",
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.length; }
}

to read the data. Ho you can see in the code above I added Id property to the Customer class. The property can be a string of integer. Both will be OK for jqGrid. The Id value will be saved twice: one time as the id of the <tr> element of the row of the grid and once as the <td> element of the first table column. If you never need to display the id for the user you can remove the Id column from the grid, but still place id in the JSON data. It you will use non-unique ids you could have the same problems like described here.

Another way will be to change the code of the MVC Action so that it produces the JSON data in the default format. To do this you can change the code of the GridData to the following:

public ActionResult GridData() {
    var list = new List<Customer> {
        new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
    };
    return Json (new {
        page = 1,
        total = 1,
        records = list.Count,
        rows = (from x in list
                orderby x.Id
                select new {
                    id = x.Id,
                    cell = new[] {
                        x.Code,
                        x.FirstName,
                        x.LastName
                    }
                }
        )
    }, JsonRequestBehavior.AllowGet);
}

All the code above I included only for understanding of the jqGrid basics. In the code above the data will be sorted by Id which corresponds to the sortname: 'Id' which you use in the jqGrid. The name will be send to the server as the sidx parameter. Additionally the parameters sortorder: 'asc' and rowNum: 10 of the jqGrid will define the values of sord and rows parameters of the action. The last parameter page send to the server will be initially set to 1 and will be increased if the user choose the next page. So typical prototype of the MVC action is

public ActionResult GridData (string sidx, string sord, int page, int rows)

I recommend you to read the old answer and the UPDATED part of the next answer. I hope the answers bring you forward in the usage of jqGrid. Here you will find the answer on the question: why the default format of the JSON data, which jqGrid wait for, looks so strange.

Answer 3

I think your controller throws an exception in GridData(), because MVC3 doesn't allow JSON answers to GET requests by default. You may modify this behavior like this:

public ActionResult GridData()
{  
    List<Customer> list = new List<Customer>();
    list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

Answer 4

try this code segment. i always create a JqgridRow to return in Json.

public ActionResult GridData()

{

List<Customer> list = new List<Customer>();
list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });

var GetData = new
                {
                    rows = (from x in list 
                            select new JqGridRow()
                            {
                                cell = new string[] {
                                    x.Code.ToString(),
                                    x.FirstName.ToString(),
                                    x.LastName .ToString(),
                                }
                            }
                            ).ToArray()
                };

return Json(GetData , JsonRequestBehavior.AllowGet);

}

hope this help..