jqGrid with ASP.NET MVC3 again?

Question

I thought I'd got this thing sorted, but I try to use jqGrid in another of my applications and it doesn't want to work. It wont even go to the URL mentioned. It won't even show up the emptyrecords string, just an empty grid.
This is what I have in the View

$("#list").jqGrid({
            url: '/Customers/MyAccount/GetEnhancementRequests',
            datatype: 'json',
            type: 'POST',
            colNames: ['ID', 'Requested By', 'Requested Date', 'Details', 'Progress'],
            colModel: [
            { name: 'Id', index: 'ID', key: true, width: 55 },
            { name: 'CustomerName', index: 'CustomerName', width: 50 },
            { name: 'requestDate', index: 'requestDate', width: 50 },
            { name: 'details', index: 'details', width: 50 },
            { name: 'progress', index: 'progress', width: 50 }
            ],
            pager: $("#pager"),
            rowNum: 2,
            rowList: [2, 10, 50, 100, 200],
            sortname: 'ID',
            viewrecords: true,
            sortorder: 'desc',
            caption: 'Enhancement Requests',
            imgpath: '/Content/images',
            width: 1000,
            height: 500,
            emptyrecords: 'No enhancements have been submitted',
            jsonReader: { repeatitems: false }
        });


        $("#list").jqGrid('navGrid', '#pager',
         { edit: false, add: false, del: false },
         {},
         {},
         {},
         { multipleSearch: true, multipleGroup: true }
         );

And I've changed my controller action to just be this

[HttpPost]
public JsonResult GetEnhancementRequests(string sidx, string sord, int page, int rows, bool _search, string filters) 
        {
            var jsonData = new
            {
                total = 1,
                page = page,
                records = 1,
                rows = (
                     new { 
                         id = 1,
                         cell = new string[]{
                            "1", "RequestedBy", DateTime.Now.ToShortDateString(), "Lots of details", "and even some progress"}                        
                     })
            };
            return Json(jsonData );  
        }

I've got breakpoints in the controller action, but it isn't even going into the method. Any insights?

Edit: Forgot to add, I have the following reference to scripts. As you can see, I've got all req files

<link href="../../../../Scripts/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="../../../../Scripts/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../../../Scripts/ui.multiselect.css" rel="stylesheet" type="text/css" />

<script src="../../../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery-ui-1.8.15.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../../Scripts/ui.multiselect.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>  
<script src="../../../../Scripts/jquery.tablednd.js" type="text/javascript"></script>

Answer 1

Thanks for your input. Turns out I had a mistake allright. I was calling type instead of mtype and jqGrid just did nothing with the Url I specified. Once I'd corrected it, it now works fine.

Thanks for the pointers about imgpath and pager btw. Appreciate it Thank you

Answer 2

There are some error in your code:

• You should remove jsonReader: { repeatitems: false } parameter from the jqGrid definition if you use format of rows with items having {id, cell} properties where cell is an array of strings.
• You should include every JavaScript file only once. Currently you include both jquery-ui-1.8.15.min.js and jquery-ui-1.8.16.custom.min.js. You should remove jquery-ui-1.8.15.min.js. In the same way the file jquery.tablednd.js already included in the jquery.jqGrid.min.js in the minimized form. You should remove jquery.tablednd.js.

Some other things are not errors, but just recommendation:

• Parameter imgpath not exist in jqGrid since many year. You used probably some retro example as the template. Including of parameter imgpath: '/Content/images' do the same as including blaBla: 'HaHa': it does nothing. So you should remove imgpath: '/Content/images'.
• You should replace pager: $("#pager") to pager: "#pager". The expression $("#pager") means selection of the DOM element on the page having id="page" and creating jQuery wrapper to the DOM element. jqGrid need to know only id of the pager. So if the value of pager parameter will be not the string and jQuery element instead jqGrid just get id attribute from the element and modifies the value of pager parameter to the string '#' + id. It's better to use pager parameter directly in the form `pager: "#pager".
• I recommend you to look at the UPDATED part of the answer. It contains the code which forward error messages to jqGrid, fixing of some CSS problems in case of the usage of jqGrid with ASP.NET MVC 2 or 3 and shows how to use data paging, sorting and filtering in case of Entity Framework. So it could be interesting for you. You can download the demo project in the link from the "UPDATED 2" (at the end) of the answer.