jQuery Grid Plugin - jqGrid

I got it resolved.

The issue was, first we need to get the View loaded ( via controller action). Then inside the view, it will call the appropriate Action method to bring the JSON data and load it.

Step1 : Define the view  (used razor view, Client.CSHTML, this gets loaded as default view from Globall.asax)

@{
    Layout = "../Shared/_ClientLayout.cshtml";
    Page.Title = "Client.cshtml";
}
 

 
   
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>  
<script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>    
<script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>          

 <script type ="text/javascript">

     jQuery(document).ready(function (pagr) {
         alert("p-->:" + pagr),
         jQuery("#list").jqGrid({
             url: '/Client/ClientList2/',
             datatype: 'json',
             mtype: 'GET',
             colNames: ['Details', 'Edit', 'Name', 'TaxID'],
             colModel: [
                { name: 'Details', index: 'Details', width: 40, align: 'left', sortable: false },
                { name: 'Edit', index: 'Edit', width: 40, align: 'left', sortable: false },
                { name: 'Name', index: 'Name', width: 100, align: 'left', sortable: true,search:true },
                { name: 'TaxID', index: 'TaxID', width: 40, align: 'left' }
              ],
             pager: jQuery('#pager'),
             rowNum: 10,
             rowList: [5, 10, 20, 50],
             sortname: 'Name',
             sortorder: "desc",
             viewrecords: true,
             imgpath: '/scripts/themes/coffee/images',
             caption: 'Client List',
             width: 650,
             height: 250
         });
     });
</script>

    
<h2>Client Search</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

step2 :  Define the default action ( for Global.asax)

              public ActionResult ClientList()
       {
           ViewData["Message"] = "Welcome to ASP.NET MVC!";
           return View();
       }

Step3 :  Write the method to bring the json data for the view

public ActionResult  ClientList2(string sidx, string sord, int? page, int? rows)
        {
           
                int pageSize = rows ?? 2;
                int totalRecords = db.Clients.Count();
                int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
                int currentPage = page ?? 1;
                string sortByColumnName = sidx ?? "ClientID";
                string sortDirection = sord ?? "desc";              

                var cc = (from c in db.Clients                                  
                                 orderby c.Name
                                 select c).ToList();        

                var jsonData = new jqGridJson()
                {
                    total = totalPages,
                    page = currentPage,
                    records = totalRecords,
                    rows = (
                      from c in cc
                      select new jqGridRowJson
                      {
                          id =c.ClientID,
                          cell = new List<string> {                              
                             "<a href='" + "Client/ClientDetail?ClienId=" + "" +  c.ClientID  + "" + "'>Details</a>",
                                "<a href='" + "Client/EditClient?ClienId=" + "" +  c.ClientID  + "" + "'>Edit</a>",
                                c.Name,
                                c.TaxID  }
                      }).ToArray()
                };
                return Json(jsonData, JsonRequestBehavior.AllowGet);

step4 : In Global.asax, define the default view and default action.

   public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
   "Default", // Route name
   "{controller}/{action}/{id}", // URL with parameters
   new { controller = "Client", action = "ClientList", id = UrlParameter.Optional } // Parameter defaults
);

Thats all.

Thanks,