How to use JqGrid with ASP.NET MVC

Step 1 : Download JqGrid plugin

You can do either of the following:

  1. Download the files from
  2. Use Nuget Package Manager to download the files for you.

I prefer using Nuget Package Manager to download and integrate any 3rd party plugins, it reduces time and is not error prone. Open the Nuget Package Manager by right clicking the Web Project and selecting the ‘Manage Nuget Package’ option. In search box type in ‘jquery.jqGrid’ and install it.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Step 2 : Include the downloaded jqGrid css and js files in your view : Ideally I would be using a bundle for both css and js, but I for the sake of keeping it simple here is what I am doing…

<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 : JqGridObject class

JqGrid on every

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() {  
        colNames:['Id', 'Name'],  
            { name: 'Id', index: 'Id'},  
            { name: 'Name', index: 'Name'}  
        jsonReader: {  
            root: 'Data',  
            id: 'id',  
            repeatitems: false  
        pager: $('#myPager'),  
        rowList: [2, 5, 10],  
        caption: 'Jqgrid MVC Tutorial'  

<table id="myGrid"></table>  
<div id="myPager"></div>  

and our jqgrid is ready to serve !

Hope you found this useful :)

More Links