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:
Example source code can be found here (it uses good old Northwind Database). I will be extending this example while digging into jqGrid features.
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:
<head>Let's add two placeholders in our html code - one for grid (table) and one for pager (div)
<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>
<script src="/Scripts/grid.locale-en.js" type="text/javascript">
</script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript">
</script>
</head>
<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>In next step we should initialize grid with some options (most of them can be changed later) and setup colModel.
<div id="jqgpProducts" style="text-align:center;"></div>
<script type="text/javascript">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.
$(document).ready(function() {
$('#jqgProducts').jqGrid({
//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
});
});
</script>
/// <summary>All what is left is some cool database (or other data source) access code and we can watch our first jqGrid in action.
/// Provides json data for jqGrid
/// </summary>
/// <param name="sidx">sorting column</param>
/// <param name="sord">sorting direction</param>
/// <param name="page">page number</param>
/// <param name="rows">number of rows per page</param>
/// <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[] {
product.ProductID.ToString(),
product.ProductName,
product.SupplierID.ToString(),
product.CategoryID.ToString(),
product.QuantityPerUnit,
product.UnitPrice.ToString(),
product.UnitsInStock.ToString()
}
}
).ToArray()
};
//Returning json data
return Json(productsData);
}
