Using JQGrid in ASP.NET MVC 3

JQGrid is one of the most powerful opensource grid available for commercial use.

We can easily use JQGrid in MVC 3 also, but instead of directly using JQGrid, i would like to refer to use any component/wrapper built over JQGrid, which can make data and grid structure in strongly typed form.

After lots of search i found a very good helper Lib.Web.MVC, it is a library which contains some helper classes for ASP.NET MVC such as strongly typed jqGrid helper, XSL transformation HtmlHelper/ActionResult, custom attributes and more.

Now lets use this "Lib.Web.MVC" and create an application.

Now lets say i wants to create an application which is showing employee details in grid using JQGrid (Lib.Web.MVC).


First of all add Lib.Web.MVC to you project either using NuGet or directly download the dll/application from Lib.Web.MVC.

Now next step is to create an ViewModel class for Grid, in which we creates properties for all the column (of employee) which we wants to show in grid and add various attributes on it.

like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using DataAnnotationsExtensions;
using Lib.Web.Mvc.JQuery.JqGrid.DataAnnotations;
using System.Web.Mvc;
//your project namespace will be here.
 public class EmployeeDetailViewModel
    {

        [JqGridColumnLayout(Width = 40)]//fix the width of column in grid
        [JqGridColumnLabel(Label = " All")] // to show select all column with check box
        public string All { get; set; }

        [ScaffoldColumn(false)]//if you don't wants to show this column in grid
        public Guid ProfileID { get; set; }

        [StringLength(20)]
        [Display(Name = "Employee Id")]// heading of columns
        public string EmployeeId { get; set; }

        [StringLength(100)]
        [Display(Name = "Employee Name")]
        public string EmployeeName { get; set; }

        [Display(Name = "Email Address")]
        [Required, Email] // this will be used when same model will be used to take value for create employee
        public string Email { get; set; }

        [StringLength(50)]
        [Display(Name = "Address")]
        public string Address { get; set; }

        [JqGridColumnLayout(Width = 150)]
        public string Action { get; set; }

        public EmployeeDetailViewModel()
        {

        }

        public EmployeeDetailViewModel(MyNamespace.Models.EmployeeProfile profile)
        {
            All = "";
            ProfileID = profile.PID;
            EmployeeId = profile.EmployeeId;
            EmployeeName = profile.EmployeeName;
            Email = profile.Email;
            Address = profile.Address;

//the action column will contains "Edit" and "View" links in grid.
            Action = "" +
"";

        }

    }


 public class Mylib 
    {
        public static System.Web.Mvc.UrlHelper GetURLHelper()//to get the action url
        {
            return new UrlHelper(HttpContext.Current.Request.RequestContext);
        }
}


in view create jqgrid like:
@{ 
   int noofrows = Convert.ToInt32( System.Configuration.ConfigurationManager.AppSettings["RowsInGrid"].ToString());//to get rows per page

   var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper("EmpGrid",
      dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
      methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
      pager: true,
      rowsNumber: noofrows,
      url: Url.Action("GetEmployee"),//this action will be called to get data 
      viewRecords: true,
      autoWidth: true// to fit the grid in parent div/table
  );
  }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult GetEmployee(JqGridRequest request, EmployeeViewModel viewModel)
        {

   int totalPagesCount =0;
                        var employees = _empRepo.FindRange(pageIndex: request.PageIndex, pageLength: request.RecordsCount, out totalPagesCount);

                       
                        JqGridResponse response = new JqGridResponse()
                        {
                            TotalPagesCount = (int)Math.Ceiling((float)totalPagesCount / (float)request.RecordsCount),
                            PageIndex = request.PageIndex,
                            TotalRecordsCount = totalRecordsCount
                        };

                        response.Records.AddRange(from i in employees select new JqGridRecord(Convert.ToString(new EmployeeViewModel(i).employeeid), new EmployeeViewModel(i)));

                        return new JqGridJsonResult() { Data = response };
         }

Compiled By: Rajesh Rolen