Question

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 🙂