Reputation: 41
First of all am new to ASP.NET MVC.
I want to do custom sorting and paging in JqGrid
using a stored procedure. Parameters to the stored procedure are StartIndex
, PageSize
, SortExpression
.
How can I get the current page details and sort details and how to call my action method on each navigation in jqgrid
?
As far as I know the stored procedure side is fine. But when I load first time 10 records are retrieved. Total number of record is 16. But I cannot see page 2 or control for navigating to the expected next page.
$(function () {
$("#myGrid").jqGrid({
url: '/Request/GetRequests/',
datatype: 'json',
mytype: 'get',
colNames: ['RequestType', 'RequestFrom', 'Summary', 'Status', 'CreatedDate', 'RequestID'],
colModel: [
{ name: 'RequestType', index: 'RequestType', width: 200 },
{ name: 'FromName', index: 'FromName', width: 200 },
{ name: 'Summary', index: 'Summary', width: 350 },
{ name: 'RequestStatus', index: 'RequestStatus', width: 150 },
{ name: 'CreatedDate', index: 'CreatedDate', width: 150 },
{ name: 'RequestID', index: 'RequestID', width: 150 }
],
pager: $('#myPager'),
rowNum: 10,
sortname: 'CreatedDate',
gridview: true,
sortorder: 'desc',
loadonce: true,
rowList: [5, 10, 20, 50],
width: 1100,
height: 900,
viewrecords: true,
caption: 'Request Details',
onSelectRow: function ()
{
}
});
//var j = jQuery.noConflict();
//j('.datepicker').datepicker();
});
<table id="myGrid"></table>
<div id="myPager"></div>
Action method:
[HttpGet]
public JsonResult GetRequests(string sidx, string sord, int page, int rows)
{
RequestRepository edb = new RequestRepository();
int pageIndex = page;
int pageSize = rows;
int startRow = (pageIndex * pageSize) + 1;
RequestNavigation data = edb.RequestGetParam(page, rows, sidx, sord);
int totalRecords = data.totalRecords;
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = data.RequestDetails.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Upvotes: 1
Views: 3071
Reputation: 41
I found the solution.
Its a simple problem in jqgrid property loadonce: true we have to change this to loadonce: false
in the javascript:
...
gridview: true,
sortorder: 'desc',
loadonce: true,
rowList: [5, 10, 20, 50],
...
Becomes
...
gridview: true,
sortorder: 'desc',
loadonce: false,
rowList: [5, 10, 20, 50],
...
Upvotes: 1