Server Side Paging in JQGrid

Question

I am trying to implement Server side paging in JQGrid. Can any body helps me to how to achieve it. Currently client side is working fine in my grid but wanted to change it to server side.

Answer 1

Taken from : http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/

If you have worked with JqGrid before you will no doubt be familiar with the default parameters passed to any ajax request: “page”, “rows”, “sidx” & “sord”. These parameters correspond to current page, records per page, sort column, and sort order respectively.

The screenshot below, will help you understand this better.

So, to handle this I have prepared a class called ‘JqGridObject’.

public class JqGridObject  
{  
    public string Page { get; set; }  
    public int PageSize { get; set; }  
    public string SortColumn { get; set; }  
    public string SortOrder { get; set; }  
    public List<Fruit> Data { get; set; }  
}

public class Fruit  
{  
    public int Id { get; set; }  
    public string Name { get; set; }  
} 

Send json data from controller using this JqGridObject class

public ActionResult GetJqGridData(string page, string rows, string sidx, string sord)
{
    var jqGridData = new JqGridObject()
    {
        Data = GetSomeSampleData(),
        Page = page,
        PageSize = 3, // u can change this !
        SortColumn = sidx,
        SortOrder = sord
    };

    return Json(jqGridData, JsonRequestBehavior.AllowGet);
}

public List<Fruit> GetSomeSampleData()
{
    return new List<Fruit>
    {
        new Fruit{Id = 1, Name = "Apple" },
        new Fruit{Id = 2, Name = "Melon" },
        new Fruit{Id = 3, Name = "Orange" },
        new Fruit{Id = 4, Name = "Grapes" },
        new Fruit{Id = 5, Name = "Pineapple" },
        new Fruit{Id = 6, Name = "Mango" },
        new Fruit{Id = 7, Name = "Bannana" },
        new Fruit{Id = 8, Name = "Cherry" }
    };
}

JqGrid jquery call.

<script type="text/javascript">  
    $(document).ready(function () {
        $("#myGrid").jqGrid({
            url: '@Url.Action("GetJqGridData")',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Name'],
            colModel: [
                { name: 'Id', index: 'Id' },
                { name: 'Name', index: 'Name' }
            ],
            jsonReader: {
                root: 'Data',
                id: 'id',
                repeatitems: false
            },
            pager: $('#myPager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        });
    });
</script>

<table id="myGrid"></table>  
<div id="myPager"></div>