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);
}
Email
11 comments:
I seek your advice.
I've added context menu to the grid and it worsk as expected. However, if the user doesnt select an option from the grid the conetxt menu doesnt go away when the user clicks on other rows. I was wondering if you had a solution to this. I've tried several ContextMenu plugins and several different grid events (onRightClickRow, onSelectRow, etc.) but I keep getting the same results.
Any suggestions?
I would need some source code for this ContextMenu. Can you post it here or mail it to me, so I can look through it?
I'm currently using the same code as found here: http://www.hard-bit.net/blog/?p=171
You can also see a working example here: http://www.hard-bit.net/files/jqGrid-3.5/ContextMenu.html
Try right-clicking on a row to bring up the context menu and then without selecting anything from the contextmenu left-click on another row and you'll see that the context menu remains.
Add onSelectRow event handler like this:
onSelectRow: function(rowid) {
$(document).click();
}
Should do the trick.
That did it!
Thanks for your help.
You are welcome
Thanks a lottt for the sample which you have provided.
Hi i am new to Jqgrid, can u post edit and delete of Jqgrida
Just read the later articles and download the samples from my CodePlex page - you will find there everything you need.
Hi,
i want to perform update,delete and insert options using MVC 4,after performing the operations it should be displayed in gridview and should be updated in the database,how can i do that,please let me know i need it ASAP...
any help would be appreciated..
Thankyou so much,
You can find up-to-date demos which contains what you are looking for here: http://tpeczek.codeplex.com/releases (they are for ASP.NET MVC 3 but will work with ASP.NET MVC 4 with no issues).
Post a Comment