jqGrid not displaying JSON data

Question

I'm hoping to use jqGrid for a current web project that I'm working on. The problem is, I can't seem to get the JSON data to be displayed by the grid. Here is the grid's initialization code:

$.fn.loadjqgrid = function(httpposturl){
        $(this).jqGrid({
            url: httpposturl,
            datatype: "json",
            mtype: "GET",
            colNames: ["Video Title", "Description", "Date Taken", "Date Uploaded"],
            colModel: [
               {name:"videoTitle", index:"videoTitle", width:150},
               {name:"videoDescription", index:"videoDescription", width:200},
               {name:"dateTaken", index:"dateTaken", width:150, sortable:true},
               {name:"dateUploaded", index:"dateUploaded", width:150, sortable:true}
            ],
            pager: "#gridpager",
            rowNum: 10,
            viewrecords: true,
            caption: "Video Grid"
        });
    };

The JSON that's returned by the Java servlet:

[{"dateTaken":"Wed Feb 16 00:00:00 UTC 2011","videoDescription":"This is a test","videoTitle":"Test Video","dateUploaded":""}]

Is there something wrong with how the JSON has been formatted or the way the grid has been initialized? Thanks for the help!

Solution 1

To have advantages of server side data filtering, paging and sorting jqGrid work better with the data which included additional information about the current page (see here). If you can not change the server side which produce the JSON data you can add loadonce:true parameter and then the filtering, paging and sorting of data will be done locally. But first of all jqGrid should be able to read your data.

You can use jsonReader which I suggested here (the way is also documented here):

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

The way using functions inside of jsonReader is very flexible and you can read practically any JSON data by jqGrid.

After the modification your grid will display the data: see here.

One small problem stay. jqGrid need have unique id for every grid row. The id will be assigned to every <tr> element. Currently integer ids "1", "2", ... will be used as ids because no ids are found in your JSON data. If one column of grid could be interpret as the id you can include in jsonReader the corresponding property, for example id:"videoTitle". If your data really have no id and you plan have more as one grid of the page you can receive id conflicts. In the case usage id as a function with different implementation for both grids could fix the problem.

Solution 2

You can verify if the json being returned is valid: jsonlint

Solution 3

Bottom line, the JSON data structure you are returning is incorrect.

One advantage of jqGrid is using a server-side library that automatically interacts with the client-side jqGrid. If for some reason you find using those pre-built server-side libraries untenable then you need to generate the JSON in the structure that jqGrid expects.

From the jqGrid JSON Data example (http://www.trirand.com/blog/jqgrid/jqgrid.html) your JSON should look like this:

{"page":"1",
 "total":2,
 "records":"13",
 "rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
         {"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
         {"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
         {"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
         {"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
         {"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
         {"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
         {"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
         {"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
         {"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],
 "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

So for your Data Set:

{"page":"1",
 "total:2,
 "records":"1",
 "rows":[{"id":"43", "cell":["Test Video","This is a test","Wed Feb 16 00:00:00 UTC 2011",""]}]}

Solution 4

Actually, it's quite straightforward to get JSON data into a jqGrid, and leave jqGrid to handle paging and sorting, without ever needing to re-call your JSON service.

The key to it is this line:

loadonce: true,

Now, there's no need for your JSON service to bother with rows, page, total or record values being sent around. You just load your JSON data once, and leave jqGrid to do the rest.

So, for example, here's one of my JSON web services:

http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS

And this is the jqGrid I want to create out of it:

Here's my entire jqGrid script:

$("#tblOrders").jqGrid({
    url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
    contentType: "application/json",
    datatype: "json",
    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },
    mtype: "GET",
    colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
    colModel: [
        { name: "OrderID", width: 80, align: "center" },
        { name: "OrderDate", width: 90, align: "center" },
        { name: "ShipName", width: 250 },
        { name: "ShipAddress", width: 250 },
        { name: "ShipCity", width: 95 },
        { name: "ShippedDate", width: 95 },
    ],
    pager: "#pager",
    height: 'auto',
    rowNum: 8,
    rowList: [8, 16, 24],
    loadonce: true,
    sortname: "OrderID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    autoencode: true,
    caption: "Northwind orders"
});

And that's it.

Further details on my blog:

www.MikesKnowledgeBase.com

Solution 5

If you send data in JSON format then there is no need to use jsonReader

For example : My model(jqGridModel.cs) looks something like this -

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace jqGrid.Models
{

public class jqGridModel

{

    public string CompanyName { get; set; }
    public string RooftopName { get; set; }
    public string UpdatedBy { get; set; }
    public string UpdatedDate { get; set; }
}

}

Now, all you need to do is send the data in Json format through controller

-----------jqGridController.cs----------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using jqGrid.Models;

namespace jqGrid.Controllers
{
public class jqGridController : Controller
{
    //
    // GET: /jqGrid/

    public ActionResult jqGridView ()
    {
        return View();
    }

    public JsonResult jqGridViewjson()
    {

        List<jqGridModel> company = new List<jqGridModel>();
        company.Add(new jqGridModel(){
             CompanyName="Ms", 
             RooftopName ="MS",
             UpdatedBy ="Vivek",
             UpdatedDate=DateTime.Today.ToString("dd/MM/yyyy")
        });
        Console.Write(company);
       company.Add(new jqGridModel()
        {
            CompanyName = "Ms1",
            RooftopName = "Ms1",
            UpdatedBy = "Pankaj",
            UpdatedDate = DateTime.Today.ToString("dd/MM/yyyy")
        });

        var result = Json(company, JsonRequestBehavior.AllowGet);
        return result;

    }

  }
 }

Finally the script file

----------------jqGridScript.js---------------

 $(document).ready(function () {

 jQuery("#grid").jqGrid({

    url: '/jqGrid/jqGridViewjson',
    contentType: "application/json",
    datatype: "json",   
    colNames: ['Company Name', 'Rooftop Name', 'Updated By', 'UpdatedDate'],
    colModel: [
        { name: 'CompanyName', index: 'CompanyName', width: 150 },
        { name: 'RooftopName', index: 'RooftopName', width: 150 },
        { name: 'UpdatedBy', index: 'UpdatedBy', width: 150 },
        { name: 'UpdatedDate', index: 'UpdatedDate', width: 150}            
    ],
    rowNum: 10,
    mtype: "GET",        
    rowList: [10, 20, 30],
    pager: '#pager',
    loadonce: true,
    viewrecords: true,
    sortorder: "desc",
    autoencode: true,
    caption: "Company approval"       
});
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});

---------------jqGridView.cshtml----------------

<!DOCTYPE html>
<html>
<head>
<title>jqGrid</title>
<link href="~/StyleSheet/bootstrap.css" rel="stylesheet" />
<link href="~/StyleSheet/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/StyleSheet/jquery-ui.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid-bootstarp.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid.css" rel="stylesheet" />

</head>
<body>

 <div>
   <table id="grid"></table>
   <div id="pager"></div>
</div>

 <script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.src.js"></script>
<script src="~/Scripts/jqGridScript.js"></script>  

</body>
</html>

View more solutions