Merge ( Merging ) GridView Header Columns ( Cells ) by adding Multiple Headers ( Header Row ) in ASP.NET

In this article I will explain how to merge GridView Header Column Cells by adding an additional Header Row, thus grouping Multiple GridView Columns under Single Column in ASP.Net

 

HTML Markup

The HTML Markup consists of an ASP.Net GridView with four columns. The First two columns display Customers while the remaining two display Employees, thus to differentiate we need to group these columns.

<asp:GridView ID="GridView1" 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>

 

I have made use of the OnDataBound event in order to insert an additional header row for grouping the columns.

 

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

For this article I am binding the GridView with some dummy records.

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");

        GridView1.DataSource = dt;

        GridView1.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")

        GridView1.DataSource = dt

        GridView1.DataBind()

    End If

End Sub

 

 

 

Merging the Header Columns

In the OnDataBound event handler, firstly we create a Header Row and within it add two cells as we need to create two Groups 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");

    GridView1.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")

    GridView1.HeaderRow.Parent.Controls.AddAt(0, row)

End Sub