How to create multiple row header and merge it with other columns in GridView

Tweet

In sometime showing single header is not enough in our application and we might require showing more than one header to categorize the columns. This blog concentrates on how to design the ASP.NET GridView control to have more than one row header.

Before going for implementation let us understand the actual requirement we are going to implement in this post,

I have an XML file in my project which has five columns. The screen short of the records are:

Excel sheet screen shot of the data

The XML file looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<RevenueReport>
  
  <Data Year="2008" Period="Q1" AuditedBy="Maria Anders" DirectRevenue="12500.00" ReferralRevenue="2500.00" />
  <Data Year="2008" Period="Q2" AuditedBy="Ana Trujillo" DirectRevenue="21000.00" ReferralRevenue="8000.00" />
  <Data Year="2008" Period="Q3" AuditedBy="Antonio Moreno" DirectRevenue="20000.00" ReferralRevenue="5000.00" />
  <Data Year="2008" Period="Q4" AuditedBy="Thomas Hardy" DirectRevenue="25000.00" ReferralRevenue="1200.00" />

  <Data Year="2009" Period="Q1" AuditedBy="Christina Berglund" DirectRevenue="72500.00" ReferralRevenue="5000.00" />
  <Data Year="2009" Period="Q2" AuditedBy="Hanna Moos" DirectRevenue="15000.00" ReferralRevenue="6500.00" />
  <Data Year="2009" Period="Q3" AuditedBy="Thomas Hardy" DirectRevenue="25000.00" ReferralRevenue="1520.00" />
  <Data Year="2009" Period="Q4" AuditedBy="Martín Sommer" DirectRevenue="42000.00" ReferralRevenue="2580.00" />

  <Data Year="2010" Period="Q1" AuditedBy="Laurence Lebihan" DirectRevenue="12500.00" ReferralRevenue="1500.00" />
  <Data Year="2010" Period="Q2" AuditedBy="Elizabeth Lincoln" DirectRevenue="25000.00" ReferralRevenue="5500.00" />
  <Data Year="2010" Period="Q3" AuditedBy="Hanna Moos" DirectRevenue="12000.00" ReferralRevenue="1800.00" />
  <Data Year="2010" Period="Q4" AuditedBy="Antonio Moreno" DirectRevenue="10000.00" ReferralRevenue="1200.00" />
  
</RevenueReport>

I required of Grid View is

Required output of the GridView

To implement this requirement, we have to follow the same concept we normally implement for html table with colspan and rowspan attributes.

The following points explains the same:

1. Initially when we bind the records to GridView, the page will be like the following image. (Here the Direct, Referral, Total heading has bound using XML file column name, we have to change the heading to what explained before)
   
   

   

   Normal GridView output (bind from XML file)

2. For .NET runtime, header is also a row. So once the header row created, we have to manually add one more row above the header which has been created by .NET runtime and add required columns by merging with other columns. To do this we have to use the RowCreated event on GridView. The output will be as follows:
   
   

   

   After adding one more row on top of the actual header and merging the columns

   Here the first row created and added by our program code.
   
3. Here, the first three columns are required to be merged with row (means first row Year, second row Year cells required to be merged). But the second row Year cell already created by normal binding method (using .NET runtime). So to achieve this, we required to Invisible (hide) the second row Year cell. The same will applied for Period and Audited By columns.
   
   To do this we can use RowDataBound event of GridView. The final output is below.
   
   

   

   After merging first three columns with its next row

The implementation is follows:

GridView Script

<asp:GridView ID="grdViewProducts" runat="server" AutoGenerateColumns="False" TabIndex="1"
    Width="100%" DataSourceID="XmlDataSource1" ShowFooter="false" 
    CellPadding="4" ForeColor="Black" GridLines="Vertical" 
    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
    OnRowDataBound="grdViewProducts_RowDataBound" 
    onrowcreated="grdViewProducts_RowCreated" >
    <RowStyle BackColor="#F7F7DE" />
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="Year" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="Period" HeaderText="Period" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="AuditedBy" HeaderText="Audited By" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="DirectRevenue" HeaderText="Direct" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:BoundField DataField="ReferralRevenue" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:TemplateField HeaderText="Total">
            <ItemStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:Label runat="server" ID="lblTotalRevenue" Text="0" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    
    <FooterStyle BackColor="#CCCC99" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/RevenueReport.xml"></asp:XmlDataSource>

Code behind Code

protected void grdViewProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Invisibling the first three columns of second row header (normally created on binding)
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[0].Visible = false; // Invisibiling Year Header Cell
        e.Row.Cells[1].Visible = false; // Invisibiling Period Header Cell
        e.Row.Cells[2].Visible = false; // Invisibiling Audited By Header Cell
    }

    // This is for calculation of last column (Total = Direct + Referral)
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        double dblDirectRevenue = Convert.ToDouble(DataBinder.Eval(e.Row.DataItem, "DirectRevenue").ToString());
        double dblReferralRevenue = Convert.ToDouble(DataBinder.Eval(e.Row.DataItem, "ReferralRevenue").ToString());
        Label lblTotalRevenue = ((Label)e.Row.FindControl("lblTotalRevenue"));
        lblTotalRevenue.Text = string.Format("{0:0.00}", (dblDirectRevenue + dblReferralRevenue));
    }
}

protected void grdViewProducts_RowCreated(object sender, GridViewRowEventArgs e)
{
    // Adding a column manually once the header created
    if (e.Row.RowType == DataControlRowType.Header) // If header created
    {
        GridView ProductGrid = (GridView)sender;

        // Creating a Row
        GridViewRow HeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        //Adding Year Column
        TableCell HeaderCell = new TableCell();
        HeaderCell.Text = "Year";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 2; // For merging first, second row cells to one
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Period Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Period";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Audited By Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Audited By";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Revenue Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Revenue";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 3; // For merging three columns (Direct, Referral, Total)
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding the Row at the 0th position (first row) in the Grid
        ProductGrid.Controls[0].Controls.AddAt(0, HeaderRow);
    }
}

Style Sheet

.HeaderStyle{
    border:solid 1px White;
    background-color:#81BEF7;
    font-weight:bold;
    text-align:center;
}

Here are the outputs of our example:

Output of Adding two row header and merging with adjacent cells

---

Merging rows in GridView

Let us take the same example and extend to get the row header.

To understand the requirement, we are going to merge the Year columns. If the same year repeats for next row, it needs to be merged. To achieve this, we can use DataBound event of GridView.

The C# implementation goes as below (the other events are same as described first example):

protected void grdViewProducts_DataBound(object sender, EventArgs e)
{
    //Starting from last Row Previous Row (if 12 rows in our grid)
    // merging last row and last previous row if same value (take 12, 11 and merge if same year)
    // Then last previous row with second last previous row (take 11, 10 and merge if same year)
    // etc., till first row and second row merging
    for (int rowIndex = grdViewProducts.Rows.Count - 2; rowIndex >= 0; rowIndex--)
    {
        GridViewRow row = grdViewProducts.Rows[rowIndex];
        GridViewRow previousRow = grdViewProducts.Rows[rowIndex + 1];
        if (row.Cells[0].Text == previousRow.Cells[0].Text)
        {
            if (previousRow.Cells[0].RowSpan < 2)
            {
                row.Cells[0].RowSpan = 2;
            }
            else
            {
                row.Cells[0].RowSpan = previousRow.Cells[0].RowSpan + 1;
            }
            previousRow.Cells[0].Visible = false;
        }
        row.Cells[0].CssClass = "HeaderStyle"; // This is to just give header color, font style
    }
}

We have to register DataBound event in the GridView script also

<asp:GridView ID="grdViewProducts" runat="server" AutoGenerateColumns="False" TabIndex="1"
    Width="100%" DataSourceID="XmlDataSource1" ShowFooter="false" 
    CellPadding="4" ForeColor="Black" GridLines="Vertical" 
    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
    OnRowDataBound="grdViewProducts_RowDataBound" 
    onrowcreated="grdViewProducts_RowCreated" 
    ondatabound="grdViewProducts_DataBound" >
    <RowStyle BackColor="#F7F7DE" />
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="Year" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="Period" HeaderText="Period" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="AuditedBy" HeaderText="Audited By" ItemStyle-HorizontalAlign="Left" >
        </asp:BoundField>
        <asp:BoundField DataField="DirectRevenue" HeaderText="Direct" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:BoundField DataField="ReferralRevenue" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" >
        </asp:BoundField>
        <asp:TemplateField HeaderText="Total">
            <ItemStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:Label runat="server" ID="lblTotalRevenue" Text="0" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    
    <FooterStyle BackColor="#CCCC99" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/RevenueReport.xml"></asp:XmlDataSource>

Here are the outputs of our example:

Output of merging adjacent rows to get Row header (adding to first example)

---

Three row header in GridView

Our Next example is formatting the GridView with three headers. To understand better, below is the requirement:

1. The Data which binds to the Grid is
   

   

   Excel sheet screen shot of Records

   .
   
2. Below shows the XML file
   

   <?xml version="1.0" encoding="utf-8" ?>
   <RevenueReport>
     
     <Data Year="2008" Period="Q1" AuditedBy="Maria Anders" HeadOfficeDirectDebit="2000.00" HeadOfficeReferralDebit="1000.00" HeadOfficeDirectCredit="22000.00" HeadOfficeReferralCredit="5220.00" BranchOfficeDirectDebit="1000.00" BranchOfficeReferralDebit="1200.00" BranchOfficeDirectCredit="12500.00" BranchOfficeReferralCredit="10500.00" />
     <Data Year="2008" Period="Q2" AuditedBy="Ana Trujillo" HeadOfficeDirectDebit="1200.00" HeadOfficeReferralDebit="2200.00" HeadOfficeDirectCredit="25000.00" HeadOfficeReferralCredit="7320.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1400.00" BranchOfficeDirectCredit="22500.00" BranchOfficeReferralCredit="12500.00" />
     <Data Year="2008" Period="Q3" AuditedBy="Antonio Moreno" HeadOfficeDirectDebit="2300.00" HeadOfficeReferralDebit="1300.00" HeadOfficeDirectCredit="21000.00" HeadOfficeReferralCredit="7220.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1100.00" BranchOfficeDirectCredit="11400.00" BranchOfficeReferralCredit="22500.00" />
     <Data Year="2008" Period="Q4" AuditedBy="Thomas Hardy" HeadOfficeDirectDebit="2000.00" HeadOfficeReferralDebit="1000.00" HeadOfficeDirectCredit="22000.00" HeadOfficeReferralCredit="5220.00" BranchOfficeDirectDebit="1000.00" BranchOfficeReferralDebit="1200.00" BranchOfficeDirectCredit="12500.00" BranchOfficeReferralCredit="10500.00" />
     <Data Year="2009" Period="Q1" AuditedBy="Christina Berglund" HeadOfficeDirectDebit="3000.00" HeadOfficeReferralDebit="1500.00" HeadOfficeDirectCredit="23000.00" HeadOfficeReferralCredit="6220.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="2200.00" BranchOfficeDirectCredit="14500.00" BranchOfficeReferralCredit="12500.00" />
     <Data Year="2009" Period="Q2" AuditedBy="Hanna Moos" HeadOfficeDirectDebit="2100.00" HeadOfficeReferralDebit="1200.00" HeadOfficeDirectCredit="24000.00" HeadOfficeReferralCredit="5520.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1300.00" BranchOfficeDirectCredit="14500.00" BranchOfficeReferralCredit="12500.00" />
     <Data Year="2009" Period="Q3" AuditedBy="Thomas Hardy" HeadOfficeDirectDebit="1200.00" HeadOfficeReferralDebit="1300.00" HeadOfficeDirectCredit="22000.00" HeadOfficeReferralCredit="5420.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1300.00" BranchOfficeDirectCredit="14500.00" BranchOfficeReferralCredit="12500.00" />
     <Data Year="2009" Period="Q4" AuditedBy="Martín Sommer" HeadOfficeDirectDebit="1200.00" HeadOfficeReferralDebit="1300.00" HeadOfficeDirectCredit="22000.00" HeadOfficeReferralCredit="5120.00" BranchOfficeDirectDebit="1600.00" BranchOfficeReferralDebit="1500.00" BranchOfficeDirectCredit="14500.00" BranchOfficeReferralCredit="13500.00" />
     <Data Year="2010" Period="Q1" AuditedBy="Laurence Lebihan" HeadOfficeDirectDebit="2100.00" HeadOfficeReferralDebit="1300.00" HeadOfficeDirectCredit="24000.00" HeadOfficeReferralCredit="5320.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1100.00" BranchOfficeDirectCredit="13500.00" BranchOfficeReferralCredit="11500.00" />
     <Data Year="2010" Period="Q2" AuditedBy="Elizabeth Lincoln" HeadOfficeDirectDebit="2200.00" HeadOfficeReferralDebit="1300.00" HeadOfficeDirectCredit="26400.00" HeadOfficeReferralCredit="5520.00" BranchOfficeDirectDebit="1700.00" BranchOfficeReferralDebit="1800.00" BranchOfficeDirectCredit="12500.00" BranchOfficeReferralCredit="13500.00" />
     <Data Year="2010" Period="Q3" AuditedBy="Hanna Moos" HeadOfficeDirectDebit="2100.00" HeadOfficeReferralDebit="1200.00" HeadOfficeDirectCredit="23000.00" HeadOfficeReferralCredit="5420.00" BranchOfficeDirectDebit="1500.00" BranchOfficeReferralDebit="1600.00" BranchOfficeDirectCredit="13500.00" BranchOfficeReferralCredit="13500.00" />
     <Data Year="2010" Period="Q4" AuditedBy="Antonio Moreno" HeadOfficeDirectDebit="1400.00" HeadOfficeReferralDebit="2300.00" HeadOfficeDirectCredit="11000.00" HeadOfficeReferralCredit="2320.00" BranchOfficeDirectDebit="1200.00" BranchOfficeReferralDebit="1100.00" BranchOfficeDirectCredit="12500.00" BranchOfficeReferralCredit="13500.00" />
    
   </RevenueReport>

   
   
3. The required output is:
   

   

   Required output of three row header

The Code implementation would be as follows:

<asp:GridView ID="grdViewProducts" runat="server" AutoGenerateColumns="False" TabIndex="1"
    Width="100%" DataSourceID="XmlDataSource1" ShowFooter="false" 
    CellPadding="4" ForeColor="Black" GridLines="Vertical" 
    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
    OnRowDataBound="grdViewProducts_RowDataBound" 
    onrowcreated="grdViewProducts_RowCreated" >
    <RowStyle BackColor="#F7F7DE" />
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="Year" ItemStyle-HorizontalAlign="Left" />
        <asp:BoundField DataField="Period" HeaderText="Period" ItemStyle-HorizontalAlign="Left" />
        <asp:BoundField DataField="AuditedBy" HeaderText="Audited By" ItemStyle-HorizontalAlign="Left" />
        <asp:BoundField DataField="HeadOfficeDirectDebit" HeaderText="Direct" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="HeadOfficeReferralDebit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="HeadOfficeDirectCredit" HeaderText="Direct" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="HeadOfficeReferralCredit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="BranchOfficeReferralDebit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="BranchOfficeReferralDebit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="BranchOfficeReferralDebit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
        <asp:BoundField DataField="BranchOfficeReferralDebit" HeaderText="Referral" ItemStyle-HorizontalAlign="Right" />
    </Columns>
    
    <FooterStyle BackColor="#CCCC99" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/RevenueReport3H.xml"></asp:XmlDataSource>

protected void grdViewProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[0].Visible = false; // Invisibiling Year Header Cell
        e.Row.Cells[1].Visible = false; // Invisibiling Period Header Cell
        e.Row.Cells[2].Visible = false; // Invisibiling Audited By Header Cell
    }
}
protected void grdViewProducts_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        GridView ProductGrid = (GridView)sender;
        GridViewRow HeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        //Adding Year Column
        TableCell HeaderCell = new TableCell();
        HeaderCell.Text = "Year";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 3;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Period Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Period";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 3;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Audited By Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Audited By";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.RowSpan = 3;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Head Office Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Head Office";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 4;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Branch Office Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Branch Office";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 4;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        ProductGrid.Controls[0].Controls.AddAt(0, HeaderRow);

        HeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);

        //Adding Head Office Debit Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Debit";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Head Office Credit Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Credit";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Branch Office Debit Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Debit";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        //Adding Branch Office Credit Column
        HeaderCell = new TableCell();
        HeaderCell.Text = "Credit";
        HeaderCell.HorizontalAlign = HorizontalAlign.Center;
        HeaderCell.ColumnSpan = 2;
        HeaderCell.CssClass = "HeaderStyle";
        HeaderRow.Cells.Add(HeaderCell);

        ProductGrid.Controls[0].Controls.AddAt(1, HeaderRow);
    }
}

Here are the outputs of our example:

Three row header in GridView