JqGrid formatter integer undefined - asp.net

Question

I have being trying to populate list of data in a grid for this purpose I have used JqGrid. I have installed jqGrid plugin from nuget manager and from online tutorial I have been trying to implement the same.
This is what I have done so far:-
View:-
<h2>Search</h2>
<div class="container">
<div class="row">
<table id="tblRecruiterGrid"></table>
<div id="dvPagination"></div>
</div>
</div>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/recruiter.js"></script>
Controller:-
public ActionResult RecruiterGridData(string sidx = "", string sord = "", int page = 1, int rows = 10)
{
var vData = recruiterRepo.GetAllByRelation();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = vData.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
switch (sidx)
{
case "RID":
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
default:
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
}
var vResult = vData.Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = vResult.Select(x => new
{
RID = x.RecruiterID,
RecruiterName = x.RecruiterName,
Email = x.Email,
CompanyName = x.CompanyName,
Designation = x.Designation,
Mobile = x.Mobile
}).ToList()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Javascript:-
$(function () {
$('#tblRecruiterGrid').jqGrid({
url: "/Recruiter/RecruiterGridData/",
datatype: 'json',
mtype: 'get',
colNames: ['RID', 'Recruiter Name', 'Email', 'Company Name', 'Designation', 'Mobile'],
colModel: [{ key: true, hidden: true, name: 'RID' },
{ key: false, hidden: false, name: 'RecruiterName' },
{ key: false, hidden: false, name: 'Email' },
{ key: false, hidden: false, name: 'CompanyName' },
{ key: false, hidden: false, name: 'Designation' },
{ key: false, hidden: false, name: 'Mobile' }],
pager: '#dvPagination',
rowNum: 10,
rowList: [5, 10, 25, 50, 100],
sortname: 'RID',
sortorder: "asc",
height: 'auto',
gridview: true,
autoencode: true,
viewrecords: true,
caption: '',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: 'RID' },
autowidth: true,
multiselect: false,
});
});
I'm being able to populate data in jqGrid but the paging is causing a problem. In browser developer console I'm getting a undefined error because of which the paging is not loading properly. I tried to search the problem in google but every result section pointed to include missing jqGrid file grid.locale-en.js which I have already included in my view some suggested to check if grid.locale-en.js is loaded before jquery.jqGrid.js so when I tracked down in network I got following result.
After doing lots of R&D I'm still not been able to resolve following error:-
Uncaught TypeError: Cannot read property 'integer' of undefined
Note:- Jquery libraries has already been defined in layout head section.

Answer 1

Please include always the exact version number of jqGrid, which you use, and the information about the fork of jqGrid (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7), which you use.
I suppose that you use some old version of jqGrid and you just used wrong name for locale (localization) file. The file name jquery-grid.locale-en.js is very suspected. The distribution of jqGrid have i18n with the file grid.locale-en.js. The usage of old jqGrid without locale file can produce the error Cannot read property 'integer' of undefined during filling the pager of jqGrid.
Another important error in your code is the usage of key: true property for more as one column. The column have to have unique values in every row. The property key: true informs jqGrid to use the contains from the column instead of the id property. You used already the option jsonReader: { repeatitems: false, id: 'RID' } which informs to use RID property of items as the rowid. This I would recommend you to remove unneeded hidden RID column from colModel and remove key: true, hidden: false from all other columns. You can remove options with default values: mtype: 'get', sortorder: "asc", caption: '' and multiselect: false.
I would recommend you to try to use free jqGrid, it's the fork of jqGrid, which I develop after Tony Tomov have changed the licence agreement of jqGrid and it's name to Guriddo jqGrid JS (see the post). Many new features, which
I implemented in free jqGrid are described in the wiki and readmes to all versions currently published.