jqGrid Paging in asp .net mvc

January 5, 2012 muthu ASP .Net Advanced 0

Abstract:

This is a followup article after how to load jqGrid. Paging in jqGrid is infact simple, but a separate article might help in clearing everything for users.

Objective:

We will reuse the data and class named as Person with regularly used data types like String, DateTime, int. We also have a class PersonRepository which contains a method named GetAll() for us to be used in all our grid.

Setup jqGrid in Project:

We will reuse the same project which we have done in the jqGrid Displaying data article. Also for setting up the basic jqGrid project, please refer to the same article. Visit the current jqgrid download page to download the jqgrid code. You can download everything or atleast Make sure you download the following.

  • Base
  • Table to Grid

The rest of the modules may be useful in later articles.

Basic Paging for tableToGrid:

The jqgrid may be displayed in 2 ways as one knows. One is using tableToGrid and the other option is using ajax query. For loading using tableToGrid, the code snippet is given below.

<table id="persontable" > 

<tr><th>Name</th><th>Age</th><th>DOB</th><th>Phone</th></tr> 

<tr><td>Steve</td><td>10</td><td>02-01-2002</td><td>321-549-2098</td></tr>

<tr><td>Bolviski</td><td>12</td><td>02-01-2000</td><td>321-549-2097</td></tr>

<tr><td>Gates</td><td>30</td><td>02-01-1982</td><td>331-519-1098</td></tr> 

</table>

<div id=’pager’></div>

Make sure to call the css and javascript include files as below. The sample project in our article has put them under http://oursite/scripts/jqgrid/. Also make sure to include the compatible jquery .js file.

 
    <link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" > 
    <script src="@Url.Content("~/Scripts/jqGrid/js/jquery-1.5.2.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jqGrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script> 
    <link href="@Url.Content("~/Scripts/jqGrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />    
    <script src="@Url.Content("~/Scripts/jqGrid/js/jquery.jqGrid.src.js")" type="text/javascript"></script>

On the page level or at jquery init, call the tableToGrid function.

    <script type="text/javascript"> 
    $(function () { 
      tableToGrid("#persontable", { pager: '#pager', height: 250 } ); 
      jQuery('#persontable').setGridParam({ rowNum: 10 }).trigger('reloadGrid'); }); 
    </script>

The above sets a grid with a page sized 10 rows each and height of 250.

Client Side Paging on Ajax Loaded data

There are two ways of paging here. One mode is to leave all paging responsibilities to jqGrid and just give all the data we have. This is an option and jqGrid does a good job of it. But the only issue here would be that when we have more than let’s say data of 100k size, then the page will render very slowly.

But this mode of paging is done very easily. The Action Method GetAjaxGridData from controller remains the same as we did in the previous sample, only the javascript call and the html snippet has a slight difference.

The action page should have the jqGrid ajax call and the table associated to be filled.

 
  jQuery("#persontable").jqGrid(
    { 
       url: '/Home/GetAjaxGridData', 
       datatype: "json", 
       mtype: 'GET', 
       colNames: ['DateOfBirth', 'Name', 'Phone', 'Age'],
       colModel: [ 
        { name: 'DateOfBirth', index: 'DateOfBirth', width: 100, align: 'left' }, 
        { name: 'Name', index: 'Name', width: 110, align: 'left' }, 
        { name: 'Phone', index: 'Phone', width: 110, align: 'left' }, 
        { name: 'Age', index: 'Age', width: 90, align: 'left' } ], 
       rowNum: 100, 
       sortname: 'PositionTime', 
       viewrecords: true, 
       gridview: true, 
       loadonce: true, 
       height: 400 });

The above method will be called in the page load event of jquery and will automatically fill the grid with the data.

Server Side Paging on Ajax Loaded data

This method avoids the loading of the entire data at once thus removing the bottleneck on load time. This is suitable for loading large number of rows and the pages will load like a breeze if done correctly.

The code snippet at the html side remains the same except that the loadonce attribute will be made false.

The server side code will be supplied with the current page number and the number of rows required and the Controller/action should return the correct data.

 
  public String GetAjaxPagedGridData(int page, int rows) 
  { 
     List persons = PersonRepository.GetAll(); 
     ArrayList al = new ArrayList(); 
     int i = 1; int rowstart = (page * rows + 1) - rows; int rowend = page * rows; 
     for (int j = rowstart; (j <= rowend && persons.Count > j); j++) 
     {
        Person p = persons[j]; 
        var rowdata = new { id = i++, cell = p.GetGridString() }; al.Add(rowdata); } 
        var griddata = new { total = persons.Count % rows > 0 ? (persons.Count / rows) + 1 : (persons.Count / rows), page = page, records = al.Count, rows = al.ToArray() }; 
        JavaScriptSerializer js = new JavaScriptSerializer(); 
        string Serializeddata = js.Serialize(griddata); 
        return Serializeddata; 
  }

Sample:

Click the sample project for jqGrid Paging in asp .net MVC for downloading the sample project for Visual Studio 2010.