In this article I will explain with an example, how to add dynamic Header Row to GridView programmatically in ASP.Net using C# and VB.Net.
The dynamic Header Row will be added to GridView using the OnDataBound event in ASP.Net.
 
 

HTML Markup

The HTML Markup consists of:
GridView – For displaying data.

Columns

The GridView consists of four BoundField columns.
Then First two columns display Customers while the remaining two display Employees, thus to differentiate we need to group these columns.
The GridView has been assigned OnDataBound event in order to insert an additional header row for grouping the columns.
<asp:GridView ID="gvCustomers" HeaderStyle-BackColor="#9AD6ED" HeaderStyle-ForeColor="#636363"
    runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
    <Columns>
        <asp:BoundField DataField="CustomerName" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="CustomerCountry" HeaderText="Country" ItemStyle-Width="150" />
        <asp:BoundField DataField="EmployeeName" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="EmployeeCountry" HeaderText="Country" ItemStyle-Width="150" />
    </Columns>
</asp:GridView>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Drawing;
 
VB.Net
Imports System.Data
Imports System.Drawing
 
 

Binding the GridView

Inside the Page Load event, the GridView is populated using a dynamic DataTable with some dummy data.
Note: For details about how to add dynamic DataTable with some dummy data, please refer my article Dynamically create DataTable and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] {
                            new DataColumn("CustomerName"),
                            new DataColumn("CustomerCountry"),
                            new DataColumn("EmployeeName"),
                            new DataColumn("EmployeeCountry") });
        dt.Rows.Add("John Hammond", "United States", "Albert Dunner", "Bolivia");
        dt.Rows.Add("Mudassar Khan", "India", "Jason Sprint", "Canada");
        dt.Rows.Add("Suzanne Mathews", "France", "Alfred Lobo", "Philippines");
        dt.Rows.Add("Robert Schidner", "Russia", "Shaikh Ayyaz" ,"UAE");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(3) {
                            New DataColumn("CustomerName"),
                            New DataColumn("CustomerCountry"),
                            New DataColumn("EmployeeName"),
                            New DataColumn("EmployeeCountry")})
        dt.Rows.Add("John Hammond", "United States", "Albert Dunner", "Bolivia")
        dt.Rows.Add("Mudassar Khan", "India", "Jason Sprint", "Canada")
        dt.Rows.Add("Suzanne Mathews", "France", "Alfred Lobo", "Philippines")
        dt.Rows.Add("Robert Schidner", "Russia", "Shaikh Ayyaz", "UAE")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub
 
 

Merging the Header Columns

Inside the OnDataBound event handler, a GridView Header Row is created and two Column Cells are added to it i.e. Customers and Employees.
Note: Depending on the number of columns to be grouped within a Header Cell you need to set its ColumnSpan property. Here I need to group 2 columns in one hence the value is 2.
 
Finally, the Header Row is inserted within the GridView Header Row’s Parent control.
C#
protected void OnDataBound(object sender, EventArgs e)
{
    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
    TableHeaderCell cell = new TableHeaderCell();
    cell.Text = "Customers";
    cell.ColumnSpan = 2;
    row.Controls.Add(cell);
 
    cell = new TableHeaderCell();
    cell.ColumnSpan = 2;
    cell.Text = "Employees";
    row.Controls.Add(cell);
 
    row.BackColor = ColorTranslator.FromHtml("#3AC0F2");
    gvCustomers.HeaderRow.Parent.Controls.AddAt(0, row);
}
 
VB.Net
Protected Sub OnDataBound(sender As Object, e As EventArgs)
    Dim row As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
    Dim cell As New TableHeaderCell()
    cell.Text = "Customers"
    cell.ColumnSpan = 2
    row.Controls.Add(cell)
 
    cell = New TableHeaderCell()
    cell.ColumnSpan = 2
    cell.Text = "Employees"
    row.Controls.Add(cell)
 
    row.BackColor = ColorTranslator.FromHtml("#3AC0F2")
    gvCustomers.HeaderRow.Parent.Controls.AddAt(0, row)
End Sub
 
 

Screenshot

Add dynamic Header Row to GridView programmatically in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code