In this article I will explain with an example, how to merge GridView Header Column Cells by adding an additional Header Row, thus grouping Multiple GridView Columns under Single Column in ASP.Net.
The above change results in a GridView with multiple header rows, one with the grouped header fields and other with the actual GridView fields.
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.
The GridView has been assigned OnDataBound event in order to insert an additional header row for grouping the 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>
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.
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 GridView 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");
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
Screenshot
![Merge ( Merging ) GridView Header Columns ( Cells ) by adding Multiple Headers ( Header Row ) in ASP.NET]()
Demo
Downloads
