Question

I have a gridview. Is it possible to modify the gridview so that I can have multiple rows in the column headers? For example, the following code generates the table in the picture below.

<asp:GridView ID="productsGridView" Runat="server" DataSourceID="productDataSource" AutoGenerateColumns="False" AllowSorting="True" BorderWidth="2px" 
            BackColor="White" GridLines="None" CellPadding="3" CellSpacing="1" BorderStyle="Ridge" BorderColor="White" AllowPaging="True">
    <FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle>
    <PagerStyle ForeColor="Black" HorizontalAlign="Right" BackColor="#C6C3C6"></PagerStyle>
    <HeaderStyle ForeColor="#E7E7FF" Font-Bold="True" BackColor="#4A3C8C"></HeaderStyle>

    <Columns>
       <asp:BoundField HeaderText="Product" DataField="ProductName" SortExpression="ProductName"></asp:BoundField>
       <asp:BoundField HeaderText="Unit Price" DataField="UnitPrice" SortExpression="UnitPrice" DataFormatString="{0:c}">
          <ItemStyle HorizontalAlign="Right"></ItemStyle>
       </asp:BoundField>
       <asp:BoundField HeaderText="Units In Stock" DataField="UnitsInStock" SortExpression="UnitsInStock" DataFormatString="{0:d}">
          <ItemStyle HorizontalAlign="Right"></ItemStyle>
       </asp:BoundField>
       <asp:BoundField HeaderText="Quantity Per Unit" DataField="QuantityPerUnit"></asp:BoundField>
    </Columns>
    <SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#9471DE"></SelectedRowStyle>
    <RowStyle ForeColor="Black" BackColor="#DEDFDE"></RowStyle>
</asp:GridView>

This table only has one row in the column header. What I am looking for is something like this:

Any Ideas on how I can achieve this? Is this even possible?

Answer 1

If you use a TemplateField instead, you can control the header template as well, which can be custom ASPX markup. The downside is that you have to display the data manually with Labels instead of using the simpler BoundField properties. However, this also allows you to layout the data in a custom layout to fit with the heading:

<Columns>
    <asp:TemplateField>
        <HeaderTemplate>
            Weight<br />
            Date | Time<br />
            Product
        </HeaderTemplate>
        <ItemTemplate>
            <asp:Label runat="server" Text='<%#Eval("Weight") %>'></asp:Label><br />
            <asp:Label runat="server" Text='<%#Eval("Date") %>'></asp:Label> |
            <asp:Label runat="server" Text='<%#Eval("Time") %>'></asp:Label><br />
            <asp:Label runat="server" Text='<%#Eval("Product") %>'></asp:Label>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>