Data to use multiple columns in GridView

Question

I am trying to make a GridView populate like the image below:

This is how my GridView currently looks.

Code:

<asp:GridView runat="server" ID="GridView1" CssClass="wiretable" AutoGenerateColumns="False"
   BorderColor="#E8CC6B" BorderStyle="Solid" BorderWidth="1px"
   Width="100%" ShowFooter="False" OnRowDataBound="GridView1_RowDataBound">
   <Columns>
        <asp:BoundField DataField="Name" HeaderText="Attendees" />
   </Columns>
</asp:GridView>

Answer 1

Since you want a table structure, then I would recommend using a repeater instead of a grid to get better control of the output, like this:

Markup:

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <table>
            <tr>
                <th colspan="2">Attendees</th>
            <tr>  
            <tr>     
    </HeaderTemplate>
    <ItemTemplate>
        <%# (Container.ItemIndex != 0 && Container.ItemIndex % 2 == 0) ? @"</tr><tr>" : string.Empty %> 
        <%# string.Format("{0}{1}{2}", @"<td>", Container.DataItem, @"</td>") %>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    // Only bind repeater initially, not every post back
    if (!IsPostBack)
    {
        Repeater1.DataSource = GetDataFromDatabase();
        Repeater1.DataBind();
    }
}

---

Note: You can apply whatever necessary CSS to the table header, rows and cells to make it look like you want.

Answer 2

Looking for:

<HeaderTemplate>
    <table>
        <tr>
            <th colspan="2">Attendees</th>
        <tr>  
        <tr>     
</HeaderTemplate>

So HeaderTemplate tag's attributes.