Update: A newer version of the jqGrid helper was released, read more about it here
JqGrid is a widely adopted grid plugin for jQuery, notorious for its flexibility and tons of available features, and last but not least it’s free! Creating the appropriate JavaScript to create a jqGrid and effectively use the available options can be a little verbose, and usually requires a lot of visits to the documentation wiki. I decided to create a html helper for ASP.NET MVC, which eases the implementation of jqGrid inside the view.
The helper contains a fluent interface providing for a clean and readable view. Most of the properties, events and methods from the base classes of jqGrid are implemented in the helper, including paging, sorting and toolbar searching. At this point, editing, treegrids and subgrids are not yet supported.
Sample Application
To showcase the helper I created a sample application which demonstrates various grids with different configurations. The source code from the view is displayed below every grid, which should make it easy for you to get started. You can find the sample application here.
The source code of the entire sample application including the helper is available at github. For non-git users, locate the ‘Download Source’ button on the github page to grab the code.
Requirements
- jQuery 1.3 or later, included by default when you create a MVC project in Visual Studio or you can grab the latest release at http://jquery.com
- jqGrid 3.6.5 or later, you can create your own custom jqGrid package using the Download Builder. Make sure you select all three base modules (Grid base, Formatter and Custom), these are used by the helper, other modules are not supported by the helper.
- jQuery theme, create your own or pick one from the gallery at http://jqueryui.com/themeroller
- The helper, available at github (You only need the file Grid.cs, located in the HtmlHelpers folder.)
Getting Started
After installing jqGrid and adding the helper to your application, you can start using the helper in your views. Make sure to include an import statement to the top of the viewpage that will use the helper:
<%@ Import Namespace=" MvcJqGrid.HtmlHelpers" %>
or if you’re planning on using the grid on multiple pages in your project, it’s possible to add the reference to your web.config in the system.web/pages/namespaces node, which enables the helper in all your views:
Creating a basic grid could look something like this:
Which results in:
As you can see, the grid is available in the Html class as a regular Html helper. The grid’s constructor takes one parameter, which is used to set the id of the grid. All additional properties, methods and events are available through method chaining. The order in which you call the methods doesn’t influence the behavior of the grid.
After the grid is rendered in the client, the grid issues an AJAX callback to request the data. The setUrl method points to an action on your controller, which should either return a json or an xml response containing the requested data (responsetype is set using the setDataType property, default is json). The exact format of the response can be found here.
The helper’s only responsibility is to create the appropriate clientside Html and JavaScript to generate the grid. It’s the responsibility of the controller to generate the correct response to the request for data send by the grid.
The sample application uses a custom modelbinder (created by Ilya Builuk) to catch all the request parameters jqGrid sends to the controller. This modelbinder parses all arguments send by jqGrid into a strongly typed object called GridSettings. The definition of the action inside your controller when using this modelbinder would look something like this.
public JsonResult GetData(GridSettings gridSettings)
I won’t go into the details of setting up the controller and the model to create the correct response. Lots of information about that subject can be found on the internet. Also, you can examine the sample application. The sample uses a basic model, including sorting, filtering and paging, and shows how to format the data from the model to a json response. It’s easy, I promise.
Hope you like it!
Noted : Daan le Duc created a php version of the jqGrid viewhelper, which inspired me to write this ASP.NET MVC variant. Thanx Daan for all the input and hard work!
Copyright © 2010 Webpirates. All source code used in this article is licensed under the Lesser General Public License.
Top comments (0)