Adding a Second Header to an ASP.NET Gridview
Last week, I had some specs to create a grid view in ASP that had normal column headers, as one might expect, and then also “super” column headers, where the columns were categorized. So, if, for instance, you had columns for “Dog”, “Cat”, and “Bird”, those three headers might have a “super-header” called “Pet”, in what basically amounts to a two-tiered categorization hierarchy.
Visually, what I wanted to do was create a second header row on top of the one populated from my data source, but there didn’t seem to be any good way to make this happen through the properties of the GridView. It also seemed like a mess to try to do this through CSS and somehow matching client side HTML styling with a service-side generated table. So, to combat this, I got ahold of the grid view’s table and manually added a row to it:
protected void GridView_DataBound(object sender, EventArgs e)
{
var myGridView = (GridView)sender;
if (myGridView.Controls.Count > 0)
AddSuperHeader(myGridView);
}
private static void AddSuperHeader(GridView gridView)
{
var myTable = (Table)gridView.Controls[0];
var myNewRow = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
myNewRow.Cells.Add(MakeCell());
myNewRow.Cells.Add(MakeCell("PETS", 3));
myNewRow.Cells.Add(MakeCell("ZOO ANIMALS", 3));
myNewRow.Cells.Add(MakeCell("VARMINTS", 3));
myNewRow.Cells.Add(MakeCell("GAME ANIMALS", 3));
myTable.Rows.AddAt(0, myNewRow);
}
private static TableHeaderCell MakeCell(string text = null, int span = 1)
{
return new TableHeaderCell() { ColumnSpan = span, Text = text ?? string.Empty, CssClass = "table-header" };
}
What’s going on here is that when the grid is data bound, I check to see if data exists and, if so, I add my “super header”. This consists of grabbing the grid view’s first control, which is a table. This is kind of hackalicious in that a change to the ordering of the grid view’s controls collection is a breaking change, but c’est la vie. Once we’ve got ahold of that table, it becomes relatively straightforward to create a row for it using code and to assign it a class to allow further styling in CSS.
So, quick tip for today, and my first ASP.NET oriented one, as I learn the ins and outs of webforms and hopefully later ASP.NET MVC.
Cheers!
Edit: A reader named Patrick Hayden found this useful in his travels, but he was working in Visual Basic. So for anyone interested in doing this in VB, here is his code:
Protected Sub GridViewBegroting_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles GridViewBegroting.DataBound
Dim myGridView As GridView = sender
If myGridView.Controls.Count > 0 Then
AddSuperHeader(myGridView)
End If
End Sub
Protected Sub AddSuperHeader(ByVal gridView As GridView)
Dim myTable As Table = gridView.Controls(0)
Dim myNewRow As GridViewRow = New GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal)
myNewRow.Cells.Add(MakeCell())
myNewRow.Cells.Add(MakeCell("PETS", 3))
myNewRow.Cells.Add(MakeCell("ZOO ANIMALS", 3))
myNewRow.Cells.Add(MakeCell("VARMINTS", 3))
myNewRow.Cells.Add(MakeCell("GAME ANIMALS", 3))
myTable.Rows.AddAt(0, myNewRow)
End Sub
Protected Function MakeCell(Optional ByVal text As String = "", Optional ByVal span As Int32 = 1) As TableHeaderCell
' { ColumnSpan = span, Text = text ?? string.Empty, CssClass = "table-header" }
Dim header As New TableHeaderCell()
header.ColumnSpan = span
header.Text = text
header.CssClass = "table-header"
Return (header)
End Function
Of the three tests I've written, the first two should always pass unless I get around to finishing the time machine that I started building a few years back. We might consolidate those into a single test that's a little more meaningful, perhaps by dropping the first one. We might also tease out a few more cases here to guard against regressions, say proving that calling it with 2010 adds 2010, 2011 and 2012 or something. While I don't generally feel good about checking in tests that exercise code dependent on external state (like "Now"), we can feel pretty good about these given the nature of "Now". 
The consequence of this that my where clause may be blank, it may have a clause or it may have two clauses with an AND joining them. The most basic (naive) way to handle this is to check for each control/clause whether the user has entered something and if so, to append “{Clause} AND ” to a string builder. Then, you snip off the last 5 characters to take care of the spurious “AND” that got appended. I think we’ve all seen this sort of thing before in some form or another.
This is a great example of Command-Query Separation. Toggling the light on or off is a command, and looking at the light to see whether or not it’s on is a query. But, let’s blur the lines for a moment and rewrite this so that there is no readonly “IsOn” property. Instead, SetOnValue(value) will return a boolean indicating whether the light is on or not. So now, we have a switch that also acts as the thing that tells us whether or not it’s on — our wall switch also just became a light. Now, when you toggle the switch, the switch itself glows to give you feedback. Weird.
