JqGrid not loading data from asp.net mvc action

Question

Hi,

I run into this problem few hours ago, and I can't get around it.

I'm trying to implement JqGrid into my ASP.NET MVC application. I was using examples from Phil Haack's blog post.

I imported js and css:

    <link href="/Content/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css"  />
    <link href="/Content/ui.jgrid.css" rel="stylesheet" type="text/css"  />
    <script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.jqGrid.min.js" ></script>
    <script type="text/javascript" src="/Scripts/grid.local-en.js" ></script>

I put this code in view:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Ticket/All/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Hardware', 'Issue', 'IssueDetails', 'RequestedBy', 'AssignedTo', 'Priority', 'State'],
            colModel: [
          { name: 'Id', index: 'Id', width: 40, align: 'left' },
          { name: 'Hardware', index: 'Hardware', width: 40, align: 'left' },
          { name: 'Issue', index: 'Issue', width: 200, align: 'left' },
          { name: 'IssueDetails', index: 'IssueDetails', width: 200, align: 'left' },
          { name: 'RequestedBy', index: 'RequestedBy', width: 40, align: 'left' },
          { name: 'AssignedTo', index: 'AssignedTo', width: 40, align: 'left' },
          { name: 'Priority', index: 'Priority', width: 40, align: 'left' },
          { name: 'State', index: 'State', width: 40, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            caption: 'My first grid'
        });
    }); 
</script>

<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

And here is my test action in Ticket controller:

 public ActionResult All(string sidx, string sord, int page, int rows)
    {
        var jsonData = new
        {
            total = 1, // we'll implement later 
            page = page,
            records = 3, // implement later 
            rows = new[]{
                new {id = 1, cell = new[] {"1", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
                new {id = 2, cell = new[] {"2", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
                new {id = 3, cell = new[] {"3", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}}
            }
        };
        return Json(jsonData);
    }

At this moment, I can see empty grid, but whole page is covered with with overlay, and I can't click anything (that's probably "loading" overlay).

What's wrong in here?

Answer 1

kMike,

you need to add the following to the return statement (assuming mvc 2):

return Json(jsonData, JsonRequestBehavior.AllowGet);

that should hopefully fix the problem. also, as noted in the comment on the OT, check in firebug for any issues with the request.

[edit] - also make you signature along these lines for tighter coupling to the return type:

public JsonResult All(string sidx, string sord, int page, int rows)

plus, had this in my bookmarks: http://techshorts.blogspot.com/2009/04/json-for-jqgrid-from-aspnet-mvc.html

enjoy :)

Answer 2

I seen some more errors, so I decide to write you additionally.

First, the most important thing is you should change the order of JavaScript files. The file grid.local-en.js must be included before jquery.jqGrid.min.js.

I recommend you to use jquery-1.4.3.js which works more quickly with CSS used intensively by jqGrid. Including of jquery-ui-1.8.5.custom.min.js is not required for jqGrid. jqGrid use only jQuery UI CSS file (like jquery-ui-1.8.5.custom.css). Only if you use functionality described in jQuery UI Integrations then you will need it.

Now some small optimization remarks:

The value align: 'left' is default, so you don't need include it. The pager: jQuery('#pager') can be reduced to pager: '#pager' and

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

to the

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

because jqGrid since many last versions makes all changes needed in the <table> and the pager <div> itself.

If your grid has a column which is unique and can be id of the grid row you can include key:true in the corresponding column definition, like in your case:

{ name: 'Id', index: 'Id', key: true , width: 40 }

It will allow you to reduce a little the size of data send from the server. You can add the parameter jsonReader: { cell:"" } and change the part of your code of All method, which generate rows to

rows = new[]{
    new[] {"1", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
    new[] {"2", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}},
    new[] {"3", "hard asdf", "issue adfds", "more issue", "someuser", "otheruser", "2", "Submitted"}}
}

(see this old answer or read in the documentation more about this.)