Noufal T M
Noufal T M

Reputation: 41

How to do Sorting/Paging in jqgrid in ASP.net MVC

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);
    }

enter image description here

Upvotes: 1

Views: 3071

Answers (1)

Noufal T M
Noufal T M

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

Related Questions