jqGrid and ASP.NET MVC

I've been using jqGrid a lot over last year. During this time I have created many helper classes for it. Recently I decided to put all those classes together, clean up, rewrite and publish for the community.
I made helper available as part of my Lib.Web.Mvc library, and you can download it here (source code included), or go for the NuGet package.

 

 

Now let me show you simple usage example. We will need a model class for our grid:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

public class ProductViewModel {   #region Properties   public int Id { get; set; }     public string Name { get; set; }     [JqGridColumnSortingName("SupplierId")]   public string Supplier { get; set; }     [JqGridColumnSortingName("CategoryId")]   public string Category { get; set; }     [DisplayName("Quantity Per Unit")]   [JqGridColumnAlign(JqGridColumnAligns.Center)]   public string QuantityPerUnit { get; set; }     [DisplayName("Unit Price")]   [JqGridColumnAlign(JqGridColumnAligns.Center)]   public decimal? UnitPrice { get; set; }     [DisplayName("Units In Stock")]   [JqGridColumnAlign(JqGridColumnAligns.Center)]   public short? UnitsInStock { get; set; }   #endregion     #region Constructor   public ProductViewModel()   { }     public ProductViewModel(Product product)   {     this.Id = product.Id;     this.Name = product.Name;     this.Supplier = product.Supplier.Name;     this.Category = product.Category.Name;     this.QuantityPerUnit = product.QuantityPerUnit;     this.UnitPrice = product.UnitPrice;     this.UnitsInStock = product.UnitsInStock;   }   #endregion }

 

Following standard DataAnnotations attributes are supported:

• DisplayName - This will set the name for the column (default is property name).
• DisplayFormat - Value set for NullDisplayText will be used as cell value if property value will be null. Value set for DataFormatString will be used for formatting property value (on server side).
• HiddenInput - This will set JqGridColumnModel.Hidden to true.
• Range - Value set for Maximum will be used for EditRules.MaxValue of editable column and value set Minimum for will be used for EditRules.MinValue.
• Required - This will set EditRules.Required to true for editable column.
• ScaffoldColumn - If set Scaffold to false, there will be no column created for property with this attribute.
• StringLength - Value set for MaximumLength will be used for EditOptions.MaximumLength of editable column.

  Additionaly the helper support those custom attributes (from Lib.Web.Mvc.JQuery.JqGrid.DataAnnotations namespace):

• JqGridColumnLayout - This will set the layout attributes for the column (alignment, initial width etc.).
• JqGridColumnSortable - This will set the sorting options for the column (by default every column is sortable with property name as sorting name).
• JqGridColumnFormatter - This will set the predefined (with options) or custom formatter for the column.
• JqGridColumnEditable - This will set the edit options for the column.
• JqGridColumnSearchable - This will set the search options for the column.

When our model class is done, we can start creating the view. First we need to include some CSS and JavaScript files:

?

1 2 3 4 5

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/jqGrid/jquery-ui-jqgrid.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-3.8.2.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqGrid-3.8.2.min.js")" type="text/javascript"></script>

 
Then we can instantiate the helper and set desired options:

?

1 2 3 4 5 6 7 8 9 10 11 12

@{   var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductViewModel>("products",     dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,     methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,     pager: true,     rowsNumber: 10,     sortingName: "Id",     sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Asc,     url: Url.Action("Products"),     viewRecords: true   ); }

 
This instance can be used for rendering HTML and JavaScript required by jqGrid:

?

1 2 3 4 5 6 7

@grid.GetHtml() ... <script type="text/javascript">   $(document).ready(function () {     @grid.GetJavaScript()   }); </script>

 
All we have to do now is creating an action method, which will provide data for our grid:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Products(JqGridRequest request) {   int totalRecordsCount = _productsRepository.GetCount();     JqGridResponse response = new JqGridResponse()   {     TotalPagesCount = (int)Math.Ceiling((float)totalRecordsCount / (float)request.RecordsCount),     PageIndex = request.PageIndex,     TotalRecordsCount = totalRecordsCount   };   response.Records.AddRange(from product in _productsRepository.FindRange(String.Format("{0} {1}", request.SortingName, request.SortingOrder), request.PageIndex * request.RecordsCount, request.RecordsCount)                             select new JqGridRecord<ProductViewModel>(Convert.ToString(product.Id), new ProductViewModel(product)));     return new JqGridJsonResult() { Data= response }; }

 
When you run it, you should see something similar to this:

You can download a sample project for this helper, which contains following examples:

• Basics & Formatting
• Configuration Import/Export
• Cell Editing
• CRUD - Inline Editing
• CRUD - Form Editing
• Searching - Single
• Searching - Toolbar
• Searching - Custom
• Searching - Advanced
• Subgrid
• TreeGrid

The helper doesn't support all the functionality of jqGrid, it's just a compilation of what I've been using. There is also no roadmap for it at the moment.
Refrences: http://tpeczek.blogspot.in/2011/03/jqgrid-and-aspnet-mvc-strongly-typed.html