Render MVCContrib Grid with No Header Row

The MVCContrib Grid allows for the easy construction of HTML tables for displaying data from a collection of Model objects. I add this component to all of my ASP.NET MVC projects.  If you aren’t familiar with what the grid has to offer, it’s worth the looking into.

What you may notice in the busy example below is the fact that I render my column headers independent of the grid contents.  This allows me to keep my headers fixed while the user searches through the table content which is displayed in a scrollable div*.  Thus, I needed a way to render my grid without headers. That’s where Grid Renderers come into play. 

  1. <table border="0" cellspacing="0" cellpadding="0" class="projectHeaderTable">
  2.     <tr>
  3.         <td class="memberTableMemberHeader">
  4.             <%= Html.GridColumnHeader("Member", "Index", "MemberFullName")%>     
  5.         </td>
  6.         <td class="memberTableRoleHeader">
  7.             <%= Html.GridColumnHeader("Role", "Index", "ProjectRoleTypeName")%>     
  8.         </td>       
  9.         <td class="memberTableActionHeader">
  10.             Action
  11.         </td>
  12.     </tr>
  13. </table>
  14. <div class="scrollContentWrapper">
  15. <% Html.Grid(Model)
  16.     .Columns(column =>
  17.             {
  18.                 column.For(c => c.MemberFullName).Attributes(@class => "memberTableMemberCol");
  19.                 column.For(c => c.ProjectRoleTypeName).Attributes(@class => "memberTableRoleCol");
  20.                 column.For(x => Html.ActionLink("View", "Details", new { Id = x.ProjectMemberId }) + " | " +
  21.                                 Html.ActionLink("Edit", "Edit", new { Id = x.ProjectMemberId }) + " | " +
  22.                                 Html.ActionLink("Remove", "Delete", new { Id = x.ProjectMemberId }))
  23.                     .Attributes(@class => "memberTableActionCol").DoNotEncode();
  24.             })
  25.     .Empty("There are no members associated with this project.")
  26.     .Attributes(@class => "lbContent")
  27.     .RenderUsing(new GridNoHeaderRenderer<ProjectMemberDetailsViewModel>())
  28.     .Render();
  29. %>
  30. </div>
  31. <div class="scrollContentBottom">
  32.     <!– –>
  33. </div>
  34. <%=Html.Pager(Model) %>

Maybe you noticed the reference to the GridNoHeaderRenderer class above?  Yep, rendering the grid with no header is straightforward.  

  1. public class GridNoHeaderRenderer<T> :
  2.     HtmlTableGridRenderer<T> where T: class
  3. {
  4.     protected override bool RenderHeader()
  5.     {
  6.         // Explicitly returning true would suppress the header
  7.         // just fine, however, Render() will always assume that
  8.         // items exist in collection and RenderEmpty() will
  9.         // never be called.  
  10.         // In other words, return ShouldRenderHeader() if you
  11.         // want to maintain the Empty text when no items exist.
  12.         return ShouldRenderHeader();
  13.     }
  14. }

Well, if you read through the comments, there is one catch.  You might be tempted to have the RenderHeader method always return true.  This would work just fine but you should return the result of ShouldRenderHeader() instead so the Empty text will continue to display if there are no items in the collection.

The GridRenderer feature found in the MVCContrib Grid is so well put together, I just had to share. 

* Though you can find countless alternatives to the fixed headers problem online, this is the only solution that I’ve ever found to reliably work across browsers. If you know something I don’t, please share.

Comments

  1. Great ?V I should definitely pronounce, impressed with your web site. I had no trouble navigating through all tabs and related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Quite unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your customer to communicate. Excellent task..

  2. I want to start a fashion/lifestyle blog. I love photography, but I want to upgrade my digital camera to a more professional one. I also wanted to start this blog, so which camera would you recommend me. I have a small budget, so if you could find something that is not too pricey, I would appreciate it. Thanks a lot !.

  3. Hi there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Firefox. I’m not sure if this is a formatting issue or something to do with browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the issue fixed soon. Many thanks

closed