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 }); 
});

Arteaga

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.

Reichert

I understand what you are saying. I haven't included that. I thought doc said that only use jquery.jqGrid.min.js thats it hehe. You are right I need to add the JS file as well. – Arteaga

will you reply to this thread as well please #4477976 – Arteaga

@pirzada: I answerd also your other question. You should consider to use voting up and accepting the answeres. – Reichert

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.

Alejandrinaalejandro