uncaught exception: jqGrid - No such method: navGrid

Question

jqGrid 3.8.1 was working fine than I updated jqGrid 3.8.2. The code started generating error. Error is : uncaught exception: jqGrid - No such method: navGrid. Below is my code.

Note: If I remove below line than Grid is working fine. Why is that?

jQuery("#lists55").jqGrid('navGrid', '#pagers55', { edit: false, add: false, del: false }); 

Using it in ASP.NET MVC 3 Razor.

//My Code

<link href="@Url.Content("~/Content/themes/images/jquery-ui-1.8.7.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/jquery-ui-1.8.7.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/jquery.jqGrid.min.js")" type="text/javascript"></script>


jQuery().ready(function () {
    jQuery("#lists55").jqGrid({
        data: mydata1,
        datatype: "local",
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [{ name: 'id', index: 'id', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'name', index: 'name asc, invdate', width: 100 },
            { name: 'amount', index: 'amount', width: 80, align: "right", formatter: 'number' },
            { name: 'tax', index: 'tax', width: 80, align: "right", formatter: 'number' },
            { name: 'total', index: 'total', width: 80, align: "right", formatter: 'number' },
            { name: 'note', index: 'note', width: 150, sortable: false }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pagers55',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: "JSON Example",
        footerrow: true,
        userDataOnFooter: true,
        altRows: true
    });
    jQuery("#lists55").jqGrid('navGrid', '#pagers55', { edit: false, add: false, del: false }); 
});

Answer 1

I suppose that you checked not all jqGrid modules which you needed during the jqGrid dounload. The navGrid function are used mostly for form editing functionality. So you should check "Form Edit" and "Common" modules from the "Editing" block.

If you want to verify which modules you use in the jquery.jqGrid.min.js you can open it with a text editor and you will see in the comment at the begining of the file text (typically in the line 8) starting with the following:

Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; ...

If you don't find grid.formedit.js, that you really not choose "Form Edit" during the jqGrid downloading.

Answer 2

For anyone coming here from Google, I was was having a similar issue until I found this comment in the jqGrid documentation:

You have to add grid.addons.js script file in head tag

<script src=“plugins/grid.addons.js” type=“text/javascript”></script>

I think this is the only place on the entire internet where this requirement is mentioned.