jqGrid Paging - no ajax call to get next page - asp.net-mvc-4

Question

I have a page with two jqGrids on it in different elements. When I first load the page, Firebug reports an ajax call to get the first 15 rows as expected, and the pager accurately shows the number of pages and the number of records. However, when I click the arrows on the pager, no ajax call is traced in Firebug, so I am pretty sure that something is not wired correctly. The odd thing is that I have other pages with only one jqGrid and paging works as expected. I have breakpoints in my controller (MVC4) and the initial load hits them just fine and all of the arguments are correct:
#region GetUnManagedMerchants
public JsonResult GetUnManagedMerchants(string id, string sidx, string sord, int page, int rows)
{
return GetSomeMerchants(id, false, sidx, sord, page, rows);
}
#endregion
Here is my script code:
$(document).ready(function () {
jQuery("#grdUnManaged").jqGrid({
url: '/Ajax/GetUnManagedMerchants/' + $('#UserInContext_UserId').val(),
datatype: 'json',
mType: 'GET',
colNames: ['', 'UnManaged Merchant', ''],
colModel: [
{ name: 'Manage', key: true, index: 'manage', width: 20, sortable: false, formatter: function () { return '<img src="#Url.Content("~/content/images/icons/merchant.png")" width="16" height="16" alt="Merchants" />'; } },
{ name: 'Name', index: 'name', width: 325 },
{ name: 'id', index: 'id', width: 0, hidden: true , key: true}
],
pager: '#grdUnManagedPager',
rowNum: 15,
width: 450,
height: 300,
viewrecords: true,
caption: 'Current UnManaged Merchants',
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 0) {
var merchantId = jQuery(this).getRowData(rowid)['id'];
var userId = $('#UserInContext_UserId').val();
ManageMerchant(userId, merchantId);
return true;
}
return false;
}
});
jQuery("#grdUnManaged").jqGrid('navGrid', '#grdUnManagedPager', { add: false, edit: false, del: false, search: false, refresh: true });
});
Please help me with what is missing! This is the last item I need to fix prior to finishing this project.
Thanks!
I have made the changes you suggest (Thanks) yet I still do NOT get an ajax call back when I click on the pager to see a subsequent page. I am re-posting my entire script with both grids.
<script type="text/javascript">
var buttonNames = {};
buttonNames[0] = 'Manage';
$(document).ready(function () {
jQuery('#currentUserHeader').html('<h3>Merchant Lists for ' + $('#UserInContext_Email').val() + '.</h3>');
jQuery("#grdManaged").jqGrid({
url: '/Ajax/GetManagedMerchants/' + $('#UserInContext_UserId').val(),
datatype: 'json',
mType: 'GET',
colNames: ['', 'Managed Merchant', ''],
colModel: [
{ name: 'Manage', index: 'Manage', width: 20, sortable: false, formatter: function () { return '<img src="#Url.Content("~/content/images/chevron.png")" width="16" height="16" alt="Merchants" />'; } },
{ name: 'Name', index: 'Name', width: 325 },
{ name: 'id', index: 'id', width: 0, hidden: true, key: true }
],
pager: '#grdManagedPager',
rowNum: 15,
width: 450,
height: 300,
viewrecords: true,
caption: 'Current Managed Merchants',
beforeRequest: function () {
var getUrl = '/Ajax/GetManagedMerchants/' + $('#UserInContext_UserId').val();
$('#grdManaged').setGridParam([{ url: getUrl }]);
},
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 0) {
var merchantId = jQuery(this).getRowData(rowid)['id'];
var userId = $('#UserInContext_UserId').val();
UnManageMerchant(userId, merchantId);
return true;
}
return false;
}
});
jQuery("#grdManaged").jqGrid('navGrid', '#grdManagedPager', { add: false, edit: false, del: false, search: false, refresh: true });
});
</script>
<script type="text/javascript">
$(document).ready(function () {
jQuery("#grdUnManaged").jqGrid({
url: '/Ajax/GetUnManagedMerchants/' + $('#UserInContext_UserId').val(),
datatype: 'json',
mType: 'GET',
colNames: ['', 'UnManaged Merchant', ''],
colModel: [
{ name: 'Manage', index: 'Manage', width: 20, sortable: false, formatter: function () { return '<img src="#Url.Content("~/content/images/chevron-left.png")" width="16" height="16" alt="Merchants" />'; } },
{ name: 'Name', index: 'Name', width: 325 },
{ name: 'id', index: 'id', width: 0, hidden: true , key: true}
],
pager: '#grdUnManagedPager',
rowNum: 15,
width: 450,
height: 300,
viewrecords: true,
caption: 'Current UnManaged Merchants',
beforeRequest: function () {
var getUrl = '/Ajax/GetUnManagedMerchants/' + $('#UserInContext_UserId').val();
$('#grdUnManaged').setGridParam([{ url: getUrl }]);
},
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == 0) {
var merchantId = jQuery(this).getRowData(rowid)['id'];
var userId = $('#UserInContext_UserId').val();
ManageMerchant(userId, merchantId);
return true;
}
return false;
}
});
jQuery("#grdUnManaged").jqGrid('navGrid', '#grdUnManagedPager', { add: false, edit: false, del: false, search: false, refresh: true });
});

Answer 1

may be your jqgrid overrides each other,may be on click paging second jqgrid overrides some thig,,,
but hope this help..
http://www.codeproject.com/Articles/594150/MVC-Basic-Site-Step-4-jqGrid-In