Saturday, January 8, 2011

Themed & Ajaxified MVCContrib Grid - with page size dropdown

Demo | Source

MVCContrib Grid.

Okay, that's a little biased; however, within a couple of hours of toying around with the MVCContrib Grid, I was sold.  I won't go into all the functionality provided by the grid - you can read about it here, read a more detailed writeup on Jeremy Skinner's blog here, and there's a nice writeup on the use of the grid here. What I really like about the MVCContrib Grid is the fluent code design and GridModels.  These two items are reviewed  on the MVCContrib Grid page and Jeremy's posts.

I'm kind of a demanding guy that is rarely satisfied.  And while the MVCContrib Grid is sweet, I still wanted more.  What are my demands?  I use 'demands' lightly, but many people I know would disagree... I digress.  Here they are:
  • Themeable via jQuery UI Themes
  • AJAX enabled
  • Page Size enabled,
  • Easy to use, and
  • Easy to apply to an existing MVCContrib Grid implementation.
The AJAX purests out there will disagree with my implementation of the AJAX functionality.  I call my implementation 'poor man's AJAX.'  I make the request and pass back markup.  Why?  Referring back to my list of 'demands'... the last two bullets are very important.  I don't want fellow developers to have to learn something new - Microsoft .NET related technologies are moving at a rapid pace - there's already enough to learn - I'm writing this post on a Saturday - go away... ;-)  I want the developers to make maybe a handful of simple changes to existing code and bam - it's done.

My implementation includes three parts:
  1. C# Class Library.  A class that overrides the HtmlTableGridRenderer (HtmlTableGridThemedRenderer), a class that defines a new Pager called PagerThemed, and a couple new HTML Helper extensions.
  2. A jQuery Plugin - mvccontribGrid.  This plugin handles the AJAX requests and some grid stylization. This plugin works like any jQuery plugin.  You pass a selector and a few options and the grid's good-to-go.
  3. CSS.  Simple CSS classes that provide the grid-specific styles.
In order to use the grid, you will also need jQuery and a jQuery Theme.

A little word on design.  I originally put all the CSS classes and selectors markup in the C# code; however, those markup features started to weigh down the AJAX response, so I moved CSS classes and selector additions to the plugin.  The HtmlTableGridThemedRenderer has a method called LighenUp.  This method sets an internal field that will either reduce (or not) the aforementioned CSS classes and selectors on the server-side.  The default it true - meaning the CSS classes and selectors will be rendered via the jQuery plugin - client-side.

The only part of my implementation that 'smells' a bit it the requirement to have a View and a PartialView that serve almost the same function.  Why does it smell?  It violates DRY.  However, I couldn't figure out another way to make it work without redesigning the grid control - that was not an option - I've got client work to attend to folks... :-)

Mentioning DRY, rather than cut and paste from the client (the MVC app) implementation and put it in this post, you can download the whole source code (with demo code) here.  The demo code is easy to follow.  Plus, I don't expend anyone to even read this post unless they have some developer knowledge and can easily figure out the simple logic.  Note that the source code includes a bunch of GAC assemblies copied as local references.  Since I designed the code using and for Razor (MVC 3), the GAC assemblies copied as local references was required for me to push the demo to my host - original development was MVC 3 RC2.  You can simply remove the local assemblies and replace with you GAC assemblies.

Oh yeah, almost forgot - take a look at the demo here and play around with it.  Notice that the demo include the jQuery themeroller, so you can place around with the various themes available from jQuery UI.

Thanks for reading...


Demo | Source


Kevin said...

WOW! I can't wait to dig into this. This is really sweet! Nice work.

tdryan said...

Appreciate the kind comments Keven...

bcorazza said...

Very sweet indeed!!!

Kevin Jensen said...

hmm anyway you could post this on codeplex? Looks like MSDN site doesn't work

Deepankar Raizada said...


I am using your ajax UI theme grid and everything is really cool. Thanks for this.

I just have one issue. If in the grid i have a edit button, which opens a modal dialog box for editing the records, on submit of that in the controller we are updating the records and again then retrieving the records for the grid and passing that as a success result using partialView. Now the grid is again displayed with the new records, but the mvcajaxgrid.js file does not exist re-initiated. Any idea?

Ajden said...

Hi, neat stuff, noticied one thing though.

If you have a dropdown (select-element) on the same page and if you change the page size the grid disapears.

I assume that any other dropdown will conflict with the page size dropdown.

Any idea for a fix?


I am new to contrib grid. Am using it successfully. My requirement is how will i add drop down to grid for paging.
Any help please.

elector said...

Grid looks really nice! And I am trying to change the MVCContrib Grid I use to be the "Themed one" and it is not easy I can tell you. You could have just made simple walk through for doing this. In the demo it is not easy to find even all the css files I need. Some constructive criticism, I hope you don't mind.