.NET Performance Blog

June 25, 2009

ASP.NET MVC Grid – Part 1

Filed under: ASP.NET MVC — Eric P @ 8:29 am

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:

  1. Paging (server side)
  2. Sorting (server side)
  3. AJAX – using update panel around grid
  4. Page size
  5. External Filters
  6. 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:
Mvc_Grid_Old_Grid

U can see a demo of it here:
http://demos.entechsolutions.com/XWebSiteTemplate/Admin
Login: demo/demo

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.

3. Roll my own grid. This is the most flexible solution, but will probably take the most time. I am planning to use JQuery for javascript as well as any JQuery plugins that simplify client side development without restricting UI. I would like to expose as much HTML as possible to allow front end developers free reign on look and feel.

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.Mvc_Grid_SimpleGrid
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:
http://samples.entechsolutions.com/MvcGridSample/Part1

The code is available here:
http://samples.entechsolutions.com/Downloads/MvcGridSample/MvcGridSample_Part1.zip

The next step will be adding server side paging. Here it is in Part 2.

Advertisements

6 Comments »

  1. […] ASP.NET MVC – ASP.NET Mvc Grid – Part 1 (Suggested by Elijah Manor) […]

    Pingback by The Technology Post for June 25th, 2009 - Jason N. Gaylord's Blog — June 25, 2009 @ 3:51 pm | Reply

  2. […] ASP.NET MVC – ASP.NET Mvc Grid – Part 1 (Suggested by Elijah Manor) […]

    Pingback by The Technology Post for June 25th, 2009 | Nexo IT - Information Technology News — June 25, 2009 @ 10:24 pm | Reply

  3. […] Filed under: ASP.NET MVC — Eric P @ 10:53 am At this point all the features I planned in Part 1 have been implemented. It is time to make grid re-usable. Click on image to view the whole […]

    Pingback by ASP.NET MVC Grid – Part 7 – Reusable control « RAD for N-Tier web apps in .NET — July 25, 2009 @ 10:54 am | Reply

  4. what is System Requirements, for open file ? vs2010 ? vs8 ?

    Comment by fahrizalcode — December 20, 2010 @ 3:54 am | Reply

    • The code was written in VS 2008, but I would think it should be possible to open it in VS 2010.

      Comment by Eric P — December 22, 2010 @ 4:33 am | Reply

  5. How to make an inline edit in a row?

    Comment by Sheik Shafi — October 12, 2011 @ 3:05 am | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: