I have been looking for a grid control for ASP.NET MVC. In the olden days of ASP.NET Web forms – I have been using a customized GridView which had the following features:
- Paging (server side)
- Sorting (server side)
- AJAX – using update panel around grid
- Page size
- External Filters
- Remembering the state of the Grid (page, sorting, etc…) so if user goes to page 2, clicks on “Edit” to modify one of the items and then goes back to grid – it will still be on Page 2
It looks like this:
U can see a demo of it here:
There are several options available for ASP.NET MVC:
1. MvcContrib Grid – http://www.codeplex.com/MVCContrib/Wiki/View.aspx?title=Grid.
I really like fluent interface, but there are some issues with this control:
- Only supports paging out of the box. If you want to add AJAX or sorting – have to do it yourself
- Can end up with a mess of code mixed with HTML. I noticed that even with simple HTML. I think MVC should expose as much HTML as possible and only use inline code when needed. Otherwise – it would be a lot like Web Forms.
- It doesn’t seem like the control has been updated for a while.
2. Using one of the client side grids and writing an AJAX layer for server-side paging, sorting, etc..
I have looked and jqGrid, extJs grid, flexiGrid and several others.
Each one has pluses and minuses, but one issue that I found in most, is that you are pretty much stuck with the UI they provide. There are themes and custom styles available for most, but it is extremely difficult to do any of the following
- move the pager to a different position
- replace the pager look from ‘<>’ to ‘1 2 3 …’
- change the way sorting works (use up down errors instead of links or use a drop down)
- modify how inline editing works
In most cases you will be stuck with whatever look the Grid has out of the box. In many of my projects – customer has very specific requirements about how they want the grid to look and feel, so picking one of the grids above would make it difficult to use in many circumstances.
I plan to start with 6 features that I had in my ASP.NET web forms grid. I would also like to add the following features depending on how much time I have available:
- check boxes for batch actions (like delete)
- multi column sorting
- hide/show columns
- move columns around
- provide a drop down menu in the column header (kinda like ExtJs)
- inline row editing
- expand row to display more information
Many of these features will be handled as separate samples (or add-ons) instead of being built-in into generic grid control.
As a first step I created a simple MVC web site and used MVC templates to create “List” and “Edit” pages.
For data I used an List of objects which will be re-created for any new user session. I plan to use LinqToObjects to perform various filtering/paging/sorting operations.
You can see the site here:
The code is available here:
The next step will be adding server side paging. Here it is in Part 2.