How to use JqGrid with ASP.NET MVC

Step 1 : Download JqGrid jquery plugin

There are two ways you can do this.

1. You can download the plugin from trirand.com.

2. Or you can download and install using the Nuget Package Manager.

I personally prefer using Nuget Package Manager to download and install any plugin. Simply search for “jquery.JqGrid” and click “install”. Below is screenshot by screenshot example on how to install.

Step 2 : Include these css and js files in your view

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>  
<script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>  

Step 3 : Prepare a JqGridObject Class

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; }  
} 

Step 4 : 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" }  
};  
}  

Step 5: Final Step :- 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>  

and our jqgrid is ready to serve !

Hope you found this useful :)

More Links

http://haacked.com/archive/2009/04/13/using-jquery-grid-with-asp.net-mvc.aspx

http://bartreyserhove.blogspot.in/2008/08/aspnet-mvc-and-jqgrid.html

  • prasath

    please explain this project

  • Vaibhav Shah

    nicely explained