jquery.jqGrid.min.js is not working - jqgrid

I have used 3.8.2 JQGrid file jquery.jqGrid.min.js which is only needed file with all the modules in it which will be selected from there side while downloading which is not working with one of the error = }).navGrid is not a function.
I than downloaded tonytomov-jqGrid-c3a2a2d folder from http://github.com/tonytomov/jqGrid/tree/master and used it which has path to all the modules residing in js folder and working fine. Below is the jquery.jqGrid.js file from github. I know jquery.jqGrid.js is for development purpose but jquery.jqGrid.min.js not working for me at all.
Why is that?. I have experimented alot and thats what I have found. May be I am missing something.
//This file should be used if you want to debug and develop
function jqGridInclude()
{
var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
// set include to false if you do not want some modules to be included
var modules = [
{ include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
{ include: true, incfile:'grid.base.js'}, // jqGrid base
{ include: true, incfile:'grid.common.js'}, // jqGrid common for editing
{ include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
{ include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
{ include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
{ include: true, incfile:'grid.subgrid.js'}, //jqGrid subgrid
{ include: true, incfile:'grid.treegrid.js'}, //jqGrid treegrid
{ include: true, incfile:'grid.grouping.js'}, //jqGrid grouping
{ include: true, incfile:'grid.custom.js'}, //jqGrid custom
{ include: true, incfile:'grid.postext.js'}, //jqGrid postext
{ include: true, incfile:'grid.tbltogrid.js'}, //jqGrid table to grid
{ include: true, incfile:'grid.setcolumns.js'}, //jqGrid setcolumns
{ include: true, incfile:'grid.import.js'}, //jqGrid import
{ include: true, incfile:'jquery.fmatter.js'}, //jqGrid formater
{ include: true, incfile:'JsonXml.js'}, //xmljson utils
{ include: true, incfile:'grid.jqueryui.js'}, //jQuery UI utils
{ include: true, incfile:'jquery.searchFilter.js'} // search Plugin
];
var filename;
for(var i=0;i<modules.length; i++)
{
if(modules[i].include === true) {
filename = pathtojsfiles+modules[i].incfile;
if(jQuery.browser.safari) {
jQuery.ajax({url:filename,dataType:'script', async:false, cache: true});
} else {
if (jQuery.browser.msie) {
document.write('<script charset="utf-8" type="text/javascript" src="'+filename+'"></script>');
} else {
IncludeJavaScript(filename);
}
}
}
}
function IncludeJavaScript(jsFile)
{
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.setAttribute('type', 'text/javascript');
oScript.setAttribute('language', 'javascript');
oScript.setAttribute('src', jsFile);
oHead.appendChild(oScript);
}
}
jqGridInclude();
//My Js
jQuery().ready(function () {
var lastSel;
jQuery("#sandgrid").jqGrid({
url: '/JQSandbox/MyGridData/',
datatype: 'json',
mtype: 'POST',
height: 255,
width: 640,
colNames: ['Index', 'Name', 'City', 'State'],
colModel: [
{ name: 'companyID', index: 'companyID', width: 5 },
{ name: 'companyName', index: 'companyName', width: 30 },
{ name: 'companyCity', index: 'companyCity', width: 30 },
{ name: 'companyState', index: 'companyState', width: 4, sortable: false}],
pager: jQuery('#sandgridp'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'companyID',
sortorder: "desc",
viewrecords: true,
altRows: true,
caption: 'Sandbox Grid',
ondblClickRow: function (id) {
if (id && id !== lastSel) {
jQuery('#sandgrid').restoreRow(lastSel);
lastSel = id;
alert("You've seleted " + id);
}
},
subGrid: true,
subGridUrl: '/JQSandbox/MySubGridData/',
subGridModel: [
{
name: ['Name', 'Department', 'Hire Date', 'Supervisor'],
width: [80, 20, 80, 10],
align: ['left', 'left', 'left', 'center'],
params: ['companyID']
}]
}).navGrid('#sandgridp', { edit: false, add: false, del: false });
});

How one can see in the comment of jquery.jqGrid.min.js
Modules: grid.base.js;
jquery.fmatter.js; grid.custom.js;
grid.common.js;
jquery.searchFilter.js;
grid.inlinedit.js; grid.celledit.js;
jqModal.js; jqDnR.js; grid.subgrid.js;
grid.grouping.js; grid.treegrid.js;
grid.import.js; JsonXml.js;
grid.setcolumns.js; grid.postext.js;
grid.tbltogrid.js; grid.jqueryui.js;
you selected all jqGrid modules with exception grid.formedit.js. In the jqGrid download page it has the name "Form Edit" (see "Editing" group). I tested and I can download now all modules from the jqGrid download page. So it should be not a technical problem.
So you should just download the jqGrid one more time and you will not have any problems with the usage of navGrid in jquery.jqGrid.min.js.

Related

JQGrid, Edit Url

I am new to jQuery, and I need to use jqGrid in my project.
I have one problem with edit/delete/insert; I have only one URL, editurl, then in the controller I am using the oper property to decide whether it is an insert or delete operation.
But I want to have a separate URL for the edit, delete and insert operations in jqGrid. Could you please let me know how to achieve that?
Client side code:
$(document).ready(function () {
var lastsel2;
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate'],
colModel: [
// { name: 'act', index: 'act', width: 75, sortable: false },
{name: 'Code', index: 'Code', width: 55, editable: true },
{ name: 'LoginID', index: 'LoginID', width: 90, editable: true },
{ name: 'Emailid', index: 'Emailid', width: 100, editable: true },
{ name: 'CreateDate', index: 'CreateDate', width: 100, editable: true }
],
rowNum: 10,
width: 700,
height: 300,
rowList: 10,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
onSelectRow: function (id) {
if (id && id !== lastsel2) {
if (id == "new_row") {
grid.setGridParam({ editurl: "/home1/InsertUserData" });
}
else {
grid.setGridParam({ editurl: "/home1/EditUserData" });
}
jQuery('#list5').restoreRow(lastsel2);
$("#list5_ilsave").addClass("ui-state-disabled");
$("#list5_ilcancel").addClass("ui-state-disabled");
$("#list5_iladd").removeClass("ui-state-disabled");
$("#list5_iledit").removeClass("ui-state-disabled");
lastsel2 = id;
}
},
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery("#list5").jqGrid('inlineNav', "#pager2", { edit: true, add: true, del: true, search: false, refresh: false });
});
You can pass options for all the actions with navGrid method like this:
jQuery('#list5').jqGrid('navGrid', '#pager2', { edit: true, add: true, del: true },
//edit options
{ url: '/home1/EditUserData' },
//add options
{ url: '/home1/AddUserData' },
//delete options
{ url: '/home1/DeleteUserData' }
);
Please read more here and here.
UPDATE
In case of inlineNav method jqGrid is always passing the same set of parameters (editParams) to saveRow method. As the effect the edit/add request will be made to the same URL. You are sticked with checking oper to distinguish edit for add.
In the subject of reloading the grid you can use editParams to set aftersavefunc to trigger realoadGrid like this:
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {
aftersavefunc: function(rowId, response) { jQuery('#list5').trigger('reloadGrid'); }
}});
But you should remember that it will also cause a refresh after edit (because of the same reason as described above) - you may try to use response parameter to distinguish those two. I have also removed del, search and refresh from the code as inlineNav doesn't have those options.

this.p is undefined jqgrid

I have an interesting issue. I have done this on multiple pages with multiple grids. The first grid works fine the second grid in this case fails to load. and give the following error:
this.p is undefined
...sArray(i)){P=true;h="last";U=f}else{i=[i];P=false}this.each(function(){var D=i.l... line 140 jquery.jqGrid.min.js
The user doble clicks on a row and that sets some variables and then calls the function locationGrid().
Like I said this has worked for me multiple times in the past, however on this page it fails. I have double checked and I am getting data back as shown below:
{"d":"{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"}
Any help would be appreciated.
function locationGrid() {
$('#invLocAdjustGrid').jqgrid({
height: 290,
loadui: "block",
datatype: function (rdata) { getLocationData(rdata); },
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'inventoryMasterId', width: 2, sortable: false, editable: false, hidden: true },
{ name: 'location', width: 250, editable: false, sortable: false },
{ name: 'itemType', width: 120, editable: false, sortable: false, align: 'center' },
{ name: 'currentQanity', width: 50, editable: false, sortable: false },
{ name: 'adjustedQauntity', width: 50, editable: false, sortable: false },
{ name: 'newLocationQty ', width: 50, editable: false, sortable: false },
{ name: 'deptCode', width: 50, editable: false, sortable: false }
],
pager: jQuery('#rptCodesPager'),
viewrecords: true,
width: 890,
gridComplete: function () {
$('#load_invLocAdjustGrid').hide();
$(this).prop('p').loadui = 'enable';
$('#lui_invLocAdjustGrid').hide();
},
afterInsertRow: function (rowid, aData) {
},
ondblClickRow: function (rowid) {
var myID = $('#invLocAdjustGrid').getCell(rowid, 'invPartLocId');
Ldclicked(myID);
}
});
}
function getLocationData(rdata) {
var theID = tempID;
tempID = "";
var myDTO = { 'id': theID };
var toPass = JSON.stringify(myDTO);
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
data: toPass,
success: function (data, textStatus) {
if (textStatus == "success")
ReceivedLocationData(JSON.parse(getMain(data)).rows);
},
error: function (data, textStatus) { alert('An error has occured retrieving data!'); }
});
}
function ReceivedLocationData(data) {
var thegrid = $('#invLocAdjustGrid');
var isGood = data.length;
for (var i = 0; i < isGood; i++) {
thegrid.addRowData(i + 1, data[i]);
}
}
Sorry, but your code is buggy. Moreover I recommend you to rewrite the whole code and I try to explain why.
The first important error is that you use $('#invLocAdjustGrid').jqgrid({...}); in the locationGrid instead of $('#invLocAdjustGrid').jqGrid({...});. JavaScript is case sensitive, so it's very important to use jqGrid instead of jqgrid.
Next problem exist because you use some variables and functions tempID, Ldclicked and getMain which you not defined in the posted code.
After making minimal changes the demo works. I commented only "POST" to use HTTP GET because I get the JSON directly from the file and have no active components on the wed server.
One more problem which you clear have is that your server code serialize the results twice. Typically one have the problem because of wrong usage of ASMX WebMethods. One should not convert the object to JSON manually. Instead of that one need just return the object itself. Because of the problem the d property of the JSON are not the object itself and is a string which should be one more time be parsed:
{
"d": "{\"total\":1,\"page\":0,\"records\":1,\"rows\":[{\"invPartLocId\":1053,\"inventoryMasterId\":5,\"location\":null,\"itemType\":\"S\",\"currentQanity\":1,\"adjustedQauntity\":0,\"newLocationQty\":0,\"deptCode\":\"1401 \"}]}"
}
Even such wrong formatted data can be read by jqGrid without usage datatype as function. Moreover you should always use gridview: true and never use afterInsertRow and almost never use addRowData. The modified code can be about the following:
var tempID = "abc";
$('#invLocAdjustGrid').jqGrid({
url: "INV_Inventory_Adjustment.aspx/getInventoryLocationById",
mtype: "POST",
datatype: "json",
postData: {
id: function () { return tempID; } // ??? I don't know which data should be send
},
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
return JSON.stringify(data);
},
beforeProcessing: function (data) {
$.extend (true, data, $.parseJSON(data.d));
},
jsonReader: {repeatitems: false},
loadonce: true,
colNames: ['invPartID', 'locationPartID', 'Loctaion', 'Type', 'Current QTY', 'Adjusted QTY', 'New Location QTY', 'Dept. Code'],
colModel: [
{ name: 'invPartLocId', width: 2, key: true, hidden: true },
{ name: 'inventoryMasterId', width: 2, hidden: true },
{ name: 'location', width: 250 },
{ name: 'itemType', width: 120, align: 'center' },
{ name: 'currentQanity' },
{ name: 'adjustedQauntity' },
{ name: 'newLocationQty ' },
{ name: 'deptCode' }
],
cmTemplate: {sortable: false, width: 50},
pager: '#rptCodesPager',
viewrecords: true,
gridview: true,
loadui: "block",
height: 290,
width: 890,
ondblClickRow: function (rowid) {
//Ldclicked(rowid);
}
});
The next demo demonstrate that the code work. I included in the demo the option loadonce: true which can be helpful for you too.

Server-side function is called only once in jqGrid

I've put a jqgrid the page. In Jqgrid placed a column that I want when user click on the column, Fill Other Jqgrid.Now when I click on the desired column. Only first-time Fill second JQGrid,But the next time the server side code will not run.
The code is written as follows
var firstButtonColumnIndex = 0;
grid = $('#list'); buttonNames = {};
grid.jqGrid({
url: 'jQGridHandler.ashx?Request=1',
loadonce: true,
direction: "rtl",
pgtext: "صفحه {0} از {1}",
datatype: 'json',
height: 250,
colNames: ['شماره درخواست', 'شماره اموال', 'شرح دستور کار', 'تاریخ دستور کار', 'زمان دستور کار', 'ملاحظات', '', ''],
colModel: [
{ name: 'WorkOrderNo', width: 100, sortable: true },
{ name: 'AssetNo', width: 100, sortable: true },
{ name: 'WorkDescription', width: 400, sortable: true },
{ name: 'WorkOrderDate', width: 80, sortable: true },
{ name: 'WorkOrderTime', width: 80, sortable: true },
{ name: 'Remark', width: 100, sortable: true },
{ name: 'del', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-trash'></span>";
}
},
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
gridview: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
// sortname: 'WorkOrderNo',
viewrecords: true,
sortorder: 'asc',
caption: 'درخواست ها...........',
rownumbers: true,
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 7) {
//alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
// $('img').each(function () {
$("#workRequestPopUp").draggable();
// });
} else if (iCol == 8) {
workOrderId = rowid;
$("#tblRequestWorks tr").remove();
$("#tblRequestWorks").jqGrid({
// url: 'jQGridHandler.ashx?RequestWorksFill=1&workOrderId=' + workOrderId,
url: "PublicHandler.ashx?Request=1&workOrderId: rowid",
direction: "rtl",
pgtext: "",
datatype: 'json',
height: 250,
colNames: ['نام کار', 'نام واحد', 'سرپرست واحد', 'تعداد', 'پایان کار', ''],
colModel: [
{ name: 'WorkName', width: 300, sortable: true },
{ name: 'SectionName', width: 100, sortable: true },
{ name: 'SectionSupervisor', width: 100, sortable: true },
{ name: 'RequestCount', width: 80, sortable: true },
{ name: 'FinishWork', width: 100, sortable: true },
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
sortorder: 'asc',
caption: 'Test',
rownumbers: true,
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 6) {
alert(rowid);
Fill12(rowid);
} else if (iCol == 8) {
alert(rowid);
Fill12(rowid);
return true;
// return (iCol >= firstButtonColumnIndex) ? false : true;
}
},
dataType: "json"
});
// fillRequestWorkPopup(workOrderId);
popup(e);
}
// prevent row selection if one click on the button
// return (iCol >= firstButtonColumnIndex) ? false : true;
return true;
}
});
It is Delegate Function in tr in JQGrid?
I respected professors can help. thanks All
The URL "PublicHandler.ashx?Request=1&workOrderId: rowid" seems me wrong. Do you mean probably "PublicHandler.ashx?Request=1&workOrderId=" + rowid? The better will be to use url: "PublicHandler.ashx" with postData: {Request: 1, workOrderId: rowid}.
The next problem is the usage of $("#tblRequestWorks tr").remove();. You don't included any HTML code which you use on the page. If you want to destroy the old grid and create a new one on the same place you should use GridUnload instead of $("#tblRequestWorks tr").remove();: $("#tblRequestWorks").jqGrid('GridUnload'); (see here and example).
You can also remove dataType: "json" from the code. jqGrid don't know the option and you already use the correct datatype: "json" option.
I think you can change your code so that the usage of GridUnload will be not needed. Only changing on some parameters of the second grid ($("#tblRequestWorks")) and reloading it with respect of $("#tblRequestWorks").trigger('reloadGrid', [{page: 1}]); seems me enough.
One more remark: you should be very careful in the id values for the second grid. It is not permitted to have id duplicates on the page. If you can't generate unique ids on the server you can consider to use idPrefix option of the grid.

MVC3 Razor Page using jqGrid not rebinding

I have a jqGrid on a view page and it is loaded based on gathering data from a few select lists.
The first time through all is fine. If I change one of the select lists the .change function is triggered but the .jqGrid doesnt fire so the Controller method isnt hit.
My jqGrid code
$("#Builds").change(function () {
var programID = $("#ProgramID").val();
var buildID = $('#Builds').val();
$("#UpdateBuild").show();
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: programID,
buildID: buildID
},
// Specify the column names
colNames: ["Assembly ID", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{ name: "AssemblyID", index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: false },
{ name: "AssemblyCost", index: "AssemblyCost", width: 40, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 30, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 40, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 45, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
{ name: "Show", index: "Show", width: 20, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'}],
// Grid total width and height and formatting
width: 650,
height: 200,
altrows: true,
// Paging
toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template"
}).navGrid("#jqTablePager",
{ refresh: true, add: true, edit: true, del: true },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
});
My controller Code:
[HttpPost]
public JsonResult _CustomBinding(string programID, string buildID, int page, int rows)
{
/* Variable Declarations */
BuildsRepository br = new BuildsRepository();
IEnumerable<ProgramsAssemblyBuilds> pab = br.GetProgramAssembliesBuilds(Convert.ToInt32(programID), Convert.ToInt32(buildID));
// Calculate the total number of pages
var totalRecords = pab.Count();
var totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);
var data = (from s in pab
select new
{
AssemblyID = s.AssemblyID,
cell = new object[] { s.AssemblyID, s.AssemblyName, s.AssemblyCost, s.AssemblyOrder, s.AddToBudgetReport, s.AddToPartnerRequest, s.Show}
}).ToArray();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = data.Skip((page - 1) * rows).Take(rows)
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Anyone have any ideas on this one?
Thanks
You should create the grid only once. So you should place the code
$("#jqTable").jqGrid({ ... });
outside of the change event handler.
To reload the grid you should use
$("#Builds").change(function () {
$("#jqTable").trigger("reloadGrid", [{page: 1}]);
$("#UpdateBuild").show();
});
At the end to have actual values from "#ProgramID" and '#Builds' you should use functions (methods) as the programID and buildID properties of postData:
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function() { return $("#ProgramID").val(); },
buildID: function() { return $('#Builds').val(); }
},
...
});
See more information here.

jqGrid with Virtual Scrolling not returning records in correct order

We're using a jqGrid 3.8.2 with virtual scrolling to scroll a list of records. It works well if the user is scrolling through the list slowly. As soon as the user grabs the scroll bar and quickly scrolls all the way to the bottom the records returned in the grid are completely out of order and sometimes duplicated. The AJAX call we are making to get the records calls a WCF service that returns the records from a database to the AJAX callback in the jqGrid in which the data then gets loaded to the grid. The database expects a page number which in turn indicates which page of records we want.
I am pretty sure the results are coming back in the wrong order due to timing of the AJAX calls. Meaning the calls aren't always first in first out. Newer calls are likely being returned back to the jqGrid before earlier calls.
Any thoughts on how to get this to work correctly? Any steps that I could take to help get us going in the right direction?
If it helps, here is the js configuration:
PersonalListContactGridControl.GetGridConfig = function() {
var jqGridConfig = {
url: Common.AjaxService.serviceUrl + "/GetPersonalListContacts",
datatype: "JSON",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
mtype: "POST",
autowidth: true,
height: PersonalListContactGridControl.Constants.Height,
altRows: true,
sortname: "LastName",
viewrecords: true,
emptyrecords: "",
loadtext: '',
multiselect: true,
//sortorder: "desc",
//- virtual scrolling:: 1 ON / 0 OFF
loadonce: false, // SUPPORT FOR REBIND
rowNum: PersonalListContactGridControl.Constants.GridPageSize,
scroll: 1,
gridview: true,
//- column header text
colNames: ['EndPointID',
PersonalListContactGridControl.Constants.FirstNameColumnDisplayText,
PersonalListContactGridControl.Constants.LastNameColumnDisplayText,
PersonalListContactGridControl.Constants.EmailFaxColumnDisplayText,
PersonalListContactGridControl.Constants.TypeColumnDisplayText],
//- column specific definitions
colModel: [
{ name: 'EndPointID', index: 'EndPointID', hidden: true },
{ name: 'FirstName', index: 'FirstName', width: 155, align: 'left', editable: false, title: true,
hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
formatter: PersonalListContactGridControl.formatLink },
{ name: 'LastName', index: 'LastName', width: 155, align: 'left', editable: false, title: true,
hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
formatter: PersonalListContactGridControl.formatLink },
{ name: 'EmailAddress', index: 'EmailAddress', width: 240, align: 'left', editable: false, title: true,
hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
formatter: PersonalListContactGridControl.formatEmailFax },
{ name: 'EndPointType', index: 'EndPointType', width: 60, align: 'left', editable: false, title: true,
hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
formatter: PersonalListContactGridControl.formatType }
],
//- jqGrid's "reader" ... the structure of the JSON/XML returned (Fiddler) must match this
jsonReader: {
root: "d.Contacts",
total: function(obj) {
return Math.ceil(obj.d.TotalRecords / PersonalListContactGridControl.Constants.GridPageSize);
},
records: function(obj) {
return obj.d.TotalRecords;
},
id: 'EndPointID',
repeatitems: false
},
serializeGridData: function(jqGridParms) {
//alert(jqGridParms.page);
return PersonalListContactGridControl.GetRequest(jqGridParms);
},
loadComplete: function(data) {
if (data.d) {
if (data.d.ResponseProperties.Success === false) {
if (data.d.ResponseProperties.ErrorMessage.indexOf('The List has been deleted') > -1) {
ManagePersonalList.OnPersonalListErrorHandler();
return;
}
}
var grid = PersonalListContactGridControl.Grid();
if (data.d.Contacts == null || data.d.Contacts.length == 0) { // are there any records?
// check if row exists
if (!grid.getInd(-1)) {
if (PersonalListContactGridControl.SearchString == "") {
grid.addRowData(-1, { "FirstName": PersonalListContactGridControl.Constants.NoContactDisplayText });
}
else {
grid.addRowData(-1, { "FirstName": PersonalListContactGridControl.Constants.NoContactForSearchDisplayText });
}
grid.find('#-1 input').hide(); // takeout the selection checkbox
}
PersonalListGridControl.ToggleExportButton(false);
}
else {
if (PersonalListContactGridControl.Constants.dtoToSelectID != null) {
if (PersonalListContactGridControl.SelectContactById(PersonalListContactGridControl.Constants.dtoToSelectID, true))
PersonalListContactGridControl.Constants.dtoToSelectID = null;
}
PersonalListGridControl.ToggleExportButton(true);
}
// cache the return objects
PersonalListContactGridControl.DTOS = PersonalListContactGridControl.DTOS.concat(data.d.Contacts);
PersonalListContactGridControl.InitRows();
}
},
loadError: function(xhr, status, error) {
alert("Type: " + status + "; Response: " + xhr.status + " " + xhr.statusText);
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
if (iCol == 0)
PersonalListContactGridControl.CheckItem();
else
PersonalListContactGridControl.SelectContactById(rowid);
},
onSelectRow: function(id, status) {
if (!status) return;
},
onSelectAll: function() {
var grid = PersonalListContactGridControl.Grid();
var selections = new Array();
selections = grid.getGridParam('selarrrow');
if (selections[0] == -1) {
//if -1, then no rows are available
PersonalListContactGridControl.UpdateHeaderCount(0);
}
else {
PersonalListContactGridControl.UpdateHeaderCount(selections.length);
ManagePersonalList.OnSelectAllChanged(this, { Ids: selections });
}
}
};
return jqGridConfig;
}
Try changing your JSONReader to..
jsonReader: {
root: "d.Contacts",
page: "d.currpage",
total: "d.totalpages",
records: "d.TotalRecords",
id: 'EndPointId',
repeatitems: false
},
the d.totalpages and d.currpage should come back from the AJAX call

Resources