How can I add group heading rows to a data bound GridView - asp.net

Question

I have a GridView with three databound columns, like this:
<Columns>
<asp:BoundField HeaderText="Type" DataField="Type" />
<asp:BoundField HeaderText="Amenity" DataField="Amenity" />
<asp:BoundField HeaderText="Distance" DataField="Distance" DataFormatString="{0:0.00} Km" />
</Columns>
Records are sorted by type, and I want to remove the Type column, but then insert a header row for each type when the value of type for the next set of rows changes. How can I do this?

Answer 1

This is not the prettiest, but it solves the problem without going outside of the GridView paradigm. Thanks to carlj for Adding (or Inserting) Subheader Rows into a Gridview
Dim _currentAmenityType = String.Empty
Protected Sub amenitiesGrid_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles amenitiesGrid.RowDataBound
If (e.Row.RowType = DataControlRowType.DataRow) Then
Dim drv = e.Row.DataItem
If (drv("Type") <> _currentAmenityType) Then
_currentAmenityType = drv("Type")
Dim parentTable = TryCast(e.Row.Parent, Table)
If Not parentTable Is Nothing Then
Dim row = New GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
Dim cell = New TableCell()
cell.ColumnSpan = amenitiesGrid.Columns.Count
cell.Width = Unit.Percentage(100)
cell.Style.Add("font-weight", "bold")
cell.Style.Add("background-color", "#c0c0c0")
cell.Style.Add("color", "white")
Dim span = New HtmlGenericControl("span")
span.InnerHtml = _currentAmenityType
cell.Controls.Add(span)
row.Cells.Add(cell)
parentTable.Rows.AddAt(parentTable.Rows.Count - 1, row)
End If
End If
End If
End Sub

Answer 2

With the standard GridView control, I believe that you cannot dynamically add extra rows once the control has been databound, so you would need to alter the datasource prior to databinding. However, this probably isn't a very good solution to what you need.
I think that using the GridView control might not be your best option in this situation, as the HTML that is rendered would be
<table>
<thead>
<tbody>
So adding extra "header" rows between rows wouldn't actually be Header rows. They would simply be an extra row <tr><td>. Knowing this, I think that you might be better using a Repeater control, building up the HTML for the table within the control, and then have a Placeholder within the Content Template which you can use to mimic adding a new Row.
e.g.
<table>
<asp:Repeater ID="rpt1" runat="server">
<HeaderTemplate>
<thead>
<tr>
<th> </th>
<th>Amenity</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<asp:PlaceHolder id="phRow" runat="server" />
<tr>
<td> </td>
<td>Amenity Value</td>
<td>Distance Value</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</FooterTemplate>
</asp:Repeater>
</table>
In your code, loop through each Item in the Repeater. If the Type is different, then add a Literal to the Placeholder in that Row.
Literal lt = new Literal() { Text = "<tr><td colspan='3'>Type Value</td></tr>" };