jqGrid and ASP.NET MVC - Basics

The purpose of this post is to start a small series about jqGrid. Basics which will be presented here have been already discussed around the web, so I will try to keep it short.
First we need to download jqGrid (we can choose which features should be included). Grid is themed with jQuery UI themes, so we have to download one of those as well (I will be using simple start theme). Having all this downloaded, unpacked and copied to our application, we should reference all the necessary files:
  <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
  <link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
  <link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
  <script src="/Scripts/jquery-1.3.2.js" type="text/javascript">
  <script src="/Scripts/grid.locale-en.js" type="text/javascript">
  <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript">
Let's add two placeholders in our html code - one for grid (table) and one for pager (div)
<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>

In next step we should initialize grid with some options (most of them can be changed later) and setup colModel.
<script type="text/javascript">
  $(document).ready(function() {
      //url from wich data should be requested
      url: '/Home/ProductsGridData/',
      //type of data
      datatype: 'json',
      //url access method type
      mtype: 'GET',
      //columns names
      colNames: ['ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
      //columns model
      colModel: [
                  { name: 'ProductID', index: 'ProductID', align: 'left' },
                  { name: 'ProductName', index: 'ProductName', align: 'left' },
                  { name: 'SupplierID', index: 'SupplierID', align: 'left' },
                  { name: 'CategoryID', index: 'CategoryID', align: 'left' },
                  { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                  { name: 'UnitPrice', index: 'UnitPrice', align: 'left' },
                  { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' }
      //pager for grid
      pager: $('#jqgpProducts'),
      //number of rows per page
      rowNum: 10,
      //initial sorting column
      sortname: 'ProductID',
      //initial sorting direction
      sortorder: 'asc',
      //we want to display total records count
      viewrecords: true

Now we must prepare a method (which is pointed by url option) in our Controller. This method has to return data in one of acceptable formats. In this example we will go with json. The easiest way is to return an anonymous type corresponding with the format.
/// <summary>
Provides json data for jqGrid
/// </summary>
/// <param name="sidx">
sorting column
/// <param name="sord">
sorting direction
/// <param name="page">
page number
/// <param name="rows">
number of rows per page
/// <returns>
json data</returns>
public ActionResult ProductsGridData(string sidx, string sord, int page, int rows)
  //Getting total records count from repository
  int totalRecords = _repository.GetProductsCount();

  //Preparing anonymous variable with json data
  var productsData = new
    //total pages count
    total = (int)Math.Ceiling((float)totalRecords / (float)rows),
    //page number
    page = page,
    //total records count
    records = totalRecords,
    //table with rows data
    rows = (from product in _repository.GetProducts(sidx, sord, page - 1, rows)
            select new
              //row id
              id = product.ProductID,
              //table of cells values
              cell = new string[] {

  //Returning json data
  return Json(productsData);

All what is left is some cool database (or other data source) access code and we can watch our first jqGrid in action.

Example source code can be found here (it uses good old Northwind Database). I will be extending this example while digging into jqGrid features.