ASP.Net MVC Html Helper for the jqGrid

The  jqGrid is a great grid with a lot of features, but the free version must be developed using JavaScript.
If you are developping in MVC, having a free Html Helper would be great.
This is where the MvcJqGrid enters.

The MvcJqGrid is an Html Helper that eases greatly the implementation of the jqGrid in MVC 3 with the Razor view engine or MVC WebForms .

To use the MvcJqGrid you can NuGet the package and then include the namespace in the view

@using MvcJqGrid
@using MvcJqGrid.Enums

or the web.config in the namespaces of the system.web.webPages.razor section.
A simple example:

@(Html.Grid("CustomerGrid")
    .SetCaption("Customers")
    .AddColumn(new Column("CustomerId").SetLabel("Id"))
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Company"))
    .SetUrl(Url.Action("List","Customer"))
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetViewRecords(true)
    .SetPager("pager"))

The Html is self explanatory:

• Html.Grid("CustomerGrid") - Creates the grid with id CustomerGrid
• SetCaption - Sets the grid caption
• AddColumn - Adds the columns to the grid
• SetUrl - The Action and Controller that returns the json formatted for the jqGrid SetLable - Sets the Label of the column that appears in the grid 

A simple MVC controller for the grid is:

public ActionResult List(GridSettings gridSettings)
{
   CustomerRepository repository = new CustomerRepository();
   string name = string.Empty;
   string company = string.Empty;
            
   if (gridSettings.IsSearch)
   {
       name = gridSettings.Where.rules.Any(r => r.field == "Name") ? gridSettings.Where.rules.FirstOrDefault(r => r.field == "Name").data : string.Empty;
        company = gridSettings.Where.rules.Any(r => r.field == "Company") ? gridSettings.Where.rules.FirstOrDefault(r => r.field == "Company").data : string.Empty;
    }

    var customers = repository.List(name, company, gridSettings.SortColumn, gridSettings.SortOrder);
    int totalCustomers = customers.Count;
    var jsonData = new
    {
        total = totalCustomers / gridSettings.PageSize + 1,
        page = gridSettings.PageIndex,
        records = totalCustomers,
        rows = (
                from c in customers
                select new
                {
                    id = c.CustomerID,
                    cell = new[]
                    {
                        c.CustomerID.ToString(),
                        string.Format("{0} {1}", c.FirstName, c.LastName),
                        c.CompanyName,
                        c.EmailAddress
                    }
        }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

A more complex example, with a column for operations like edit and delete is:

@(Html.Grid("CustomerGrid")
    .SetCaption("Customers")
    .AddColumn(new Column("CustomerId").SetLabel("Id").SetSearch(false))
    .AddColumn(new Column("Name"))
    .AddColumn(new Column("Company"))
    .AddColumn(new Column("EmailAddress").SetLabel("Email Address").SetSearch(false))
    .AddColumn(new Column("Last Modified").SetSearch(false))
    .AddColumn(new Column("Telephone").SetSearch(false))
    .AddColumn(new Column(" ").SetSearch(false).SetCustomFormatter("buttonize").SetWidth(60).SetAlign(Align.Right))
    .SetUrl(Url.Action("List","Customer"))
    .SetAutoWidth(true)
    .SetRowNum(10)
    .SetRowList(new[] { 10, 15, 20, 50 })
    .SetViewRecords(true)
    .SetPager("pager")
    .SetSearchToolbar(true)
    .SetSearchOnEnter(false))

Where buttonize is a javascript function where the operation column Html is returned.

   function buttonize(cellvalue, options, rowobject) {
        return 'eXtreme Programming';
    }

For more information and live examples go to the MvcJqGrid site by pressing here
The about tab has the links to the license, the source code and documentation. CodeProject