Integration of jqGrid with MVC4 application : Part1

Integration of jqGrid with MVC4 application

 

 

This article is more about integration of JQGrid in MVC 4 application .Actually I needed to implement it in my project and I found lot of difficulties to achieve its feature because I hardly found its help and if I got that was half note.

I have divided this article in parts. This part is more about integration of jqGrid with MVC 4 application.in this article we will learn given below topics

• Adding jqGrid reference file
• Structure of jqGrid in View
• Calling Controller’s action to bind result set with jqGrid
• Return Json result from action in special format from DBContext

To know more about MVC kindly go through with the links given below:

• Smart Working With Custom Value Providers in ASP.Net MVC
• Invoke Action With Model Binders in MVC
• Extension Helpers Method in MVC
• Custom Button With TagBuilder Using MVC Razor Engine
• Precompiled Razor View Using RazorGenerator MVC and PreCompiledViewEngine in MVC 4
• RETURN MULTIPLE MODELS IN SINGLE VIEW IN MVC3
• CALL CONTROLLER ACTION METHOD FROM JQUERY USING AJAX
• EXECUTION ORDER OF FILTERS IN MVC 4 WITH PRACTICES: IMPORTANT FAQ
• MEANING OF SCAFFOLDING IN MVC
• REMOVE AMBIGUTY OF CONTROLLER NAMES IN MVC APPLICATION

I’ve developed this sample application into VS 2012 and used entity framework to retrieve information from Database. This is the basic layout of mvc application as depicted below having jqGrid libraries:

v Step1: Adding jqGrid reference file

Step2: Structure of jqGrid in View

This is structure I have used as shown in image depicted below:

  1:   1:     <script src="~/Scripts/jquery.jqGrid.min.js"></script>
  2:   2:     <script src="~/Scripts/i18n/grid.locale-en.js"></script>
  3:   3:     <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
  4:   4:     <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  5:   5: 
  6:   6:     <script type="text/javascript">
  7:   7: 
  8:   8:         $(document).ready(function myfunction() {
  9:   9:            
 10:  10:             $('#list').jqGrid({
 11:  11:                 caption: "Employee Details",
 12:  12:                 url: '/Interview/GetEmployee/',
 13:  13:                 datatype: "json",
 14:  14:                 contentType: "application/json; charset-utf-8",
 15:  15:                 mtype: 'GET',
 16:  16:                 colNames: ['Address', 'City', 'Id', 'Name'],
 17:  17:                 colModel: [
 18:  18:                                 { name: 'Address', index: 'Address', width: 150 },
 19:  19:                                 { name: 'City', index: 'City', width: 150 },
 20:  20:                                 { name: 'Id', index: 'Id', width: 150 },
 21:  21:                                 { name: 'Name', index: 'Name', width: 150 }
 22:  22:                 ],
 23:  23:                 rowNum: 10,
 24:  24:                 loadonce: true
 25:  25: 
 26:  26:             });
 27:  27: 
 28:  28:             jQuery("#list").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });
 29:  29:         });
 30:  30:  </script>
 31: 

Step3: Calling Controller’s action to bind result set with jqGrid

In this step we will call controller’s action method from view, kindly refer image shown below:

Step4: Return Json result from action in special format from DBContext.

After an action called by view in jqGrid segment, it’s now action duty to return Json collection to caller to bind collection with jqGrid. Whenever action returns collection from as JsonResult it’s should be in a special format so that jqGrid could accept these values otherwise it will not load the values into grid. This is a code segment used at controller level as shown below:

  1: 1:  public JsonResult GetEmployee()
  2:   2:         {
  3:   3:             EmployeeEntities edb = new EmployeeEntities();
  4:   4:            // UsersContext u = new UsersContext();
  5:   5: 
  6:   6:             var jsonData = new
  7:   7:             {
  8:   8:                 total = 1,
  9:   9:                 page = 1,
 10:  10:                 records = edb.EmpRegistrations.ToList().Count,
 11:  11:                 rows = (
 12:  12:                   from emp in edb.EmpRegistrations.ToList()
 13:  13:                   select new
 14:  14:                   {
 15:  15:                       id = emp.Id,
 16:  16:                       cell = new string[] { 
 17:  17:                       emp.Address.ToString(), emp.City.ToString(), emp.Id.ToString(),emp.Name 
 18:  18:                       }
 19:  19:                   }).ToArray()
 20:  20:             };
 21:  21:             return Json(jsonData, JsonRequestBehavior.AllowGet);
 22:  22:         }
 23: 

 

Please have a look of image depicted below to understand the result set return by action at controller level.

Here we are almost done, now run an application and Press F5 to see an output:

I have developed this application in VS 2012 due to this, it’s tuff to upload here it doesn’t allow me upload more than 10 MB .Still I can share jqGrid reference files and controller.cs,view.cshtml and database .bak file(to create DBContext) as shown below.Kindly mail me.

Keep yourself ready for part2 to see more feature of jqGrid.

Thanks

Stay happy stay coding

Categories: JQuery , MVC