CODEWITHSUNDEEP
javascriptjqueryasp.netjqgridjqgrid-asp.net
Aneesh.A.M
Aneesh.A.M

Reputation: 1148

JQgrid is not showing rows

Here is the Javascript code:

<script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            url: "/Movies/GetAllMovies",
            datatype: "json",
            mtype: "GET",               
            colNames: ["Id", "Title", "Director", "Date"],
            colModel: [
                { name: 'Id', index: 'Id', sorttype: "int" },
                { name: 'Title', index: 'Title', sortable: false },
                { name: 'Director', index: 'Director', sortable: false },
                { name: 'ReleaseDate', index: 'ReleaseDate', align: "right", sortable: false }
            ],
            viewrecords: true,
            pager: "#pager",
            rowNum: 5,
            rownumbers: true,
            rowList: [5, 10, 15],
            height: 'auto',
            width: '500',              
            caption: "My first grid",
        });
    });


</script>

and the method which return the list of data is

 [HttpGet]
    public JsonResult GetAllMovies()
    {
        var jsonObj = Json(movieAccessLayer.GetAllMovies());
        return Json(jsonObj, JsonRequestBehavior.AllowGet);           
    }

response string:

[{"Id":66,"Title":"BibUtt","Director":"Amal Neeradh","ReleaseDate":"2006-12-12T00:00:00"},{"Id":67,"Title":"Rojaa","Director":"ManiRathnam","ReleaseDate":"1992-05-11T00:00:00"},{"Id":71,"Title":"dwed","Director":"ece","ReleaseDate":"2012-12-12T00:00:00"},{"Id":72,"Title":"Test","Director":"qqwqww","ReleaseDate":"2015-02-09T00:00:00"}]

But the problem is: JQgrid and the header row is displaying but the remaining rows are not showing. The controller method is also correct and it will return a list of object.

JQgrid

Please help me.

Upvotes: 2

Views: 654

Answers (1)

Oleg
Oleg

Reputation: 221997

I suppose that you posted not exact the data which returns the controller. You call Json twice which is the first error. The jsonObj have already System.Web.Mvc.JsonResult type. So it have the required data inside of Data property. Then you use Json(jsonObj, JsonRequestBehavior.AllowGet); which wraps the returned results and the GetAllMovies will returns the data like

{
    "ContentEncoding":null,
    "ContentType":null,
    "Data":[{"Id":66,"Title":"BibUtt",...},...],
    "JsonRequestBehavior":1,
    "MaxJsonLength":null,
    "RecursionLimit":null
}

instead of JSON data which you posted. So you should fix the code of GetAllMovies to the following

[HttpGet]
public JsonResult GetAllMovies()
{
    return Json(movieAccessLayer.GetAllMovies(), JsonRequestBehavior.AllowGet);
}

After the fix you should already see the results. I would recommend you to make additionally some simple changes in the code which creates the grid. For example

$("#list").jqGrid({
    url: "/Movies/GetAllMovies",
    datatype: "json",
    loadonce: true,
    gridview: true,
    autoencode: true,
    jsonReader: { id: "Id" },
    colNames: ["Id", "Title", "Director", "Date"],
    colModel: [
        { name: "Id", sorttype: "int" },
        { name: "Title" },
        { name: "Director" },
        { name: "ReleaseDate", align: "right", formatter: "date", sorttype: "date" }
    ],
    viewrecords: true,
    pager: "#pager",
    rowNum: 5,
    rownumbers: true,
    rowList: [5, 10, "10000:All"],
    height: "auto",
    width: 500,              
    caption: "My first grid",
});

Upvotes: 1

Related Questions