Question

I have a problem with my jqGrid. I have seen other posts here with similar problem, except that mine is particular in that the data is loading correctly in my development machine but when I publish the site on my production server, the jqGrid won’t load the data, all I get is an empty grid. Every other ajax request for data in the server works fine, except for the jqGrid. My project is in MVC3 and I am hosting the site in win2008 IIS7. This is my current code:

View:

<script type="text/javascript">
$(document).ready(function () {
    $("#grid").jqGrid({
        url: '@Url.Action("LoadAction", "Controller", new { area = "Area" })',
        editurl: '@Url.Action("SaveAction", "Controller", new { area = "Area" })',
        datatype: 'json',
        mtype: 'POST',
        colNames: [
            '@Html.LabelFor(v => new foo.bar.MyClass().Property1)',
            '@Html.LabelFor(v => new foo.bar.MyClass().Property2)',
            '@Html.LabelFor(v => new foo.bar.MyClass().Property3)',
            '@Html.LabelFor(v => new foo.bar.MyClass().Property4)'
        ], 
        colModel: [
            { name: 'Property1', index: 'Property1', editable: true },
            { name: 'Property2', index: 'Property2', editable: true, edittype: "select", editoptions: { value: "Option1:Option1;Option2:Option2"} },
            { name: 'Property3', index: 'Property3', editable: true },
            { name: 'Property4', index: 'Property4', editable: true }
        ],
        pager: $('#gridPager'),
        rowNum: 20,
        rowList: [10, 20, 50, 100],
        sortname: 'Property1',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '',
        shrinkToFit: true,
        width: 940,
        height: 300,
        gridview: true
    });
});
</script>
<div>
    <table id="grid" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="gridPager" class="scroll" style="text-align:center;"></div>
</div>

Controller:

[Authorize]
public JsonResult LoadAction(string sidx, string sord, int page, int rows)
{
    List<foo.bar.MyClass> list = foo.bar.MyClassController.getAll();

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = list.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = (
            from myclass in list
            select new
            {
                id = myclass.Id,
                cell = new string[] { 
                    myclass.Property1, 
                    myclass.Property2, 
                    myclass.Property3, 
                    myclass.Property4
                }
            }).ToArray()
    };
    return Json(jsonData);
}

Anyone have any idea what might be the problem?

Thank you.

Answer 1

1) I recommend you to include loadError event handler in your jqGrid definition. In the way you will see the error responses from the server. See the UPDATED part of the answer. You can load the corresponding demo project from here.

2) You should verify the configuration of the virtual directory where you publish the site. You use [Authorize] attribute. So should disable “Anonymous Authentication” explicitly and enable “Windows Authentication”, “Form Authentication” or other Authentication which you plan to use.