Pass Data Arrays into jqgrid table

Question

In my application, I will fetch a table of data from the server side when the page is first loaded, and use jqgrid to render it.

I can't seem to get it to work, when I request for the DummyView page for the example below, the web browser pops up a message, asking me to download the application/json file, indicates that something is deeply wrong. Here's my Jquery code:

 $(document).ready(function(){ 
      $("#list4").jqGrid({
        url:'../../ViewRecord/DummyView',
        datatype:'JSON',
        mtype: 'GET',
         colNames:['Id','Name','Description'],
 colModel:[
                         {name:'id',index:'id',width:55,resizable:true},
                         {name:'name',index:'name',width:90,resizable:true},
                        {name:'description',index:'description',width:120,resizable:true}],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[5,10,20,50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath:'/images',
        caption: 'My first grid'
      }); 
    });

And here's my ViewRecord/DummyView controller method:

public ActionResult DummyView()
{
    var page = new { page = 1 };

    var rows = new object[2];
    rows[0] = new { id = 222, cell = new[] { "222", "Blue", "This is blue" } };
    rows[1] = new { id = 2, cell = new[] { "2", "Red", "This is red" } };

    //var endarray = new[] {page, rows};


    var result = new JsonResult();
    result.Data = new { page = 1, records = 2, rows, total = 1 };

    return result;


}

Any idea how to get jqgrid to work with ASP.NET MVC?

Answer 1

You could use jQuery if you place the call to get the data within;

$(document).ready( function() {
    //your code here
});

I know this forces you to do a jQuery postback but you don't mention that that is an issue.

Answer 2

I have a complete, working, demo solution here. I also have a long series of posts on using MVC and jqGrid together starting here. The demo solution includes LINQ extensions so you can do stuff like this:

public JsonResult ListGridData(int page, int rows, string search, string sidx, string sord)
{
    var model = repository.SelectAll().ToJqGridData(page, rows, sidx + " " + sord, search,
      new[] { "Column1", "Column2", "Column3" })
    return Json(model);
}

Note that with MVC 2 you must include JsonRequestBehavior.AllowGet to use the GET HTTP verb. This is safe as the returned root data is not an array.