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 ini

Answer 1

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 company = new List();
        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----------------