"Undefined" message in jqgrid, "b.jgrid.formatter is undefined"

Question

when I'm sending JSON response to jqgrid I get "undefined" message across it and Firebug is telling me this:

b.jgrid.formatter is undefined

[Break On This Error]   

...input===true){b(".ui-pg-input",l).val(a.p.page);h=a.p.toppager?"#sp_1"+m+",#sp_1...

which basically doesn't tell me much.

This happens when I'm sending empty response:

{"total":0,"page":1,"records":0,"rows":[]}

or response with records. Records are then visible in grid. After this "undefined" message is shown up, I can't browse through pages as, of course, the bug in code appeared.

As @Oleg suggested I'm providing here additional info:

1. These are javascripts I'm using:

   jquery.validate.min.js
   jquery.validate.unobtrusive.min.js
   jquery-1.5.1.min.js
   jquery-ui-1.8.11.min.js
   jquery.jqGrid.min.js
   ui/jquery.ui.core.js
   ui/jquery.ui.widget.js
   ui/jquery.ui.datepicker.js

2. My javascript source:

   var grid = jQuery("#list").jqGrid({
               datatype: 'json',
   
               caption: 'Transaction Log',
               hiddengrid: 'true',
               postData: {
                   companyId: function () { return $("#SelectedCompany").val(); },
                   userId: function () { return $("#SelectedUser").val(); },
                   dateFromString: function () { return $("#DateFrom").val(); },
                   dateToString: function () { return $("#DateTo").val(); }
               },
               url: '@Url.Action("GetTransactionLogData")',
               mtype: 'GET',
               colNames: ['Ref.', 'TradeDate', 'Status', 'LegalEntity', ...],
               colModel: [
                   { name: 'Reference', index: 'Reference', width: '60' },
                   { name: 'TradeDate', index: 'TradeDate', width: '70' },
                   { name: 'Status', index: 'Status', width: '50' },
                   { name: 'LegalEntity', index: 'LegalEntity', width: '80' },
                   ...
               ],
               pager: $('#pager'),
               rowNum: 10,
               height: '100%'
   
           });
   

3. I've downloaded last version of jqGrid from [this link][1], it's says it's **4.4.0** version.

How can I solve this?

Thanks in advance.

Answer 1

It's important to include grid.locale-en.js before jquery.jqGrid.min.js to make jqGrid working.

Additionally I would recommend you to add gridview: true option to jqGrid and replace pager: $('#pager') to pager: '#pager' because jqGrid need the id selector of the pager only. If you use pager: $('#pager') then jqGrid will replace the parameter to pager: '#pager'. So the form pager: $('#pager') has really no sense as the jqGrid parameter.