Tuesday, June 23, 2009

jQuery Grid Plugin

Building web-apps using the new MVC-framework for ASP.NET can be challenging if you need to build the boiler-plate code for the SMART controls that come standard with ASP.NET, like the GridView, ListView, etc.

However, jQuery's plug-in, jqGrid, makes this easy. Although it can be time-consuming to setup the template that specifies the requirements for the grid, it is easy to duplicate once you have it set up.

So basically you specify the columns you want to see in the grid, specify the format for each column, and it will perform an Ajax call for built-in sorting, search, and CRUD functions.

Some of the supported features:
  • paging functions
  • add, edit, delete & search records
  • accepts XML, JSON, array or user data as input
  • multiple selection of rows
  • sub grid & grid details (great feature!)
  • UI datepicker integration
  • & more…

Of course you need to specify the server-side-code to handle these events. Pass a DTO back, JSON serialized (some other formats are supported), and it will bind the DTO's properties to the grid.

Minimum Requirements : jQuery 1.1.4+
Browser Compatibility: All Major Browsers
Website : http://www.trirand.com/blog/
Demo : http://trirand.com/jqgrid/jqgrid.html
Downloads : http://www.trirand.com/blog/?page_id=6

The number of lines of HTML you need to write yourself for this to work is just two lines:
  1. One <TABLE> tag
  2. One <DIV> tag for paging if desired
That's it, 2 lines, one for the body and one for the paging controls that also contains the controls for the CRUD functions.

Have been using it in a in-house web-development project for a UI/Process intensive CRM app with users who's machines are 10 years old, about 785MB RAM machines with an x86 Family 6 Model CPU, and it performs great. We are running it mainly on FireFox (the gold standard browser engine :-), and have tested it on IE8, Chrome and Safari 3, on Windows 2000 to XP and Vista platforms with no issues.

No comments:

Post a Comment