Noah Blumenthal's Blog

October 28, 2008

MvcContrib Grid with custom layout

Filed under: Uncategorized — noahblu @ 5:22 pm
Tags: , ,

I’m using the Grid Html Helper from the MvcContrib project (  The default grid can create automatic pagination links at the bottom of the grid, which is a pretty nice feature.  However, in order to accomodate our design, I needed some more functionality:

  1. I needed paging at the top of the grid too
  2. I needed to add some custom markup surrounding the grid to make it look right

Luckily, this wasn’t too hard.  I started by creating a class that inherits from MvcContrib.UI.Html.Grid.Grid<T>.  Something like this:

public class AdminMerchantGrid<T> : MvcContrib.UI.Html.Grid.Grid<T> where T : class

In order to render pagination at the top I had to override the RenderGridStart like so:

        protected override void RenderGridStart()
            MvcContrib.Pagination.IPagination items = base.Items as MvcContrib.Pagination.IPagination;
            RenderPagination(items, true);

And I overrode the RenderGridEnd too:

        protected override void RenderGridEnd(bool isEmpty)
            MvcContrib.Pagination.IPagination items = base.Items as MvcContrib.Pagination.IPagination;
            this.RenderPagination(items, false);

Now these are using a RenderPagination method that takes into account whether the pagination is on the top or bottom in order to fit into our design.  Notice how I could put in the custom CSS class names too which is kind of cool.  :

      protected void RenderPagination(MvcContrib.Pagination.IPagination pagedList, bool isTop)
            StringBuilder sb = new StringBuilder();
            if (!isTop)
                sb.AppendLine("<div class=\"mainbox\">");
            if (pagedList != null && pagedList.TotalItems > 0)
                sb.AppendLine("<div class=\"paging\">");
                for (int i = 1; i <= pagedList.TotalPages; i++)
                    sb.Append(this.CreatePageLink(i, i.ToString()));
                    if (i < pagedList.TotalPages)
                        sb.Append(" ");
                sb.AppendLine("<span class=\"position\">");
                sb.Append("Page ");
                sb.Append(" of ");
                if (pagedList.PageNumber > 1)
                    sb.Append(this.CreatePageLink(pagedList.PageNumber - 1, "<"));
                sb.Append(" ");
                if (pagedList.PageNumber < pagedList.TotalPages)
                    sb.Append(this.CreatePageLink(pagedList.PageNumber + 1, ">"));
                sb.AppendLine("<div class=\"cl\">&nbsp;</div>");
            if (isTop)

            if (!isTop)

Boy do I love Reflector!  Most of the RenderPagination method came from the original MvcContrib’s method.  I just added couple things in there like if (isTop) and such.  So not only is MvcContrib’s Grid a simple, easy to use solution for building a grid, it’s pretty easily extensible too!


1 Comment »

  1. it is cool staff. It is so neat and simple.

    Comment by Dev — November 3, 2008 @ 11:03 pm | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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

%d bloggers like this: