aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Group Columns in Gridview Header Row & Display Multiple Columns Under Single Column

Sep 16, 2013

Here I will explain how to group columns in gridview header row in C# and VB.NET or show multiple columns under single column in gridview.


To group columns in gridview we need to write the code like as shown below

<html xmlns="">
<title>Group Gridview Columns in</title>
<form id="form1" runat="server">
<asp:GridView ID="gvDetails" AutoGenerateColumns="false" CellPadding="5" runat="server" OnRowDataBound="gvDetails_RowDataBound">
<asp:BoundField HeaderText="UserId" DataField="UserId" />
<asp:BoundField HeaderText="UserName" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:BoundField HeaderText="Location" DataField="Location" />
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
Now in code behind add the following namespaces

C# Code

using System;
using System.Data;
using System.Web.UI.WebControls;
After that add below code in code behind

protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
protected void BindGridview()
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Location", typeof(string));
dt.Rows.Add(1, "SureshDasari", "B.Tech", "Chennai");
dt.Rows.Add(2, "MadhavSai", "MBA", "Nagpur");
dt.Rows.Add(3, "MaheshDasari", "B.Tech", "Nuzividu");
dt.Rows.Add(4, "SureshDasari", "B.Tech", "Chennai");
gvDetails.DataSource = dt;
protected void gvDetails_RowDataBound(object sender, GridViewRowEventArgs e)
GridViewRow gvRow = e.Row;
if (gvRow.RowType == DataControlRowType.Header)
GridViewRow gvrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
TableCell cell0 = new TableCell();
cell0.Text = "Age Group";
cell0.HorizontalAlign = HorizontalAlign.Center;
cell0.ColumnSpan = 2;
TableCell cell1 = new TableCell();
cell1.Text = "No. Of Employees";
cell1.HorizontalAlign = HorizontalAlign.Center;
cell1.ColumnSpan = 2;
gvDetails.Controls[0].Controls.AddAt(0, gvrow);

Imports System.Data
Imports System.Web.UI.WebControls
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
End If
End Sub
Protected Sub BindGridview()
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Education", GetType(String))
dt.Columns.Add("Location", GetType(String))
dt.Rows.Add(1, "SureshDasari", "B.Tech", "Chennai")
dt.Rows.Add(2, "MadhavSai", "MBA", "Nagpur")
dt.Rows.Add(3, "MaheshDasari", "B.Tech", "Nuzividu")
dt.Rows.Add(4, "SureshDasari", "B.Tech", "Chennai")
gvDetails.DataSource = dt
End Sub
Protected Sub gvDetails_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
Dim gvRow__1 As GridViewRow = e.Row
If gvRow__1.RowType = DataControlRowType.Header Then
Dim gvrow__2 As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert)
Dim cell0 As New TableCell()
cell0.Text = "Age Group"
cell0.HorizontalAlign = HorizontalAlign.Center
cell0.ColumnSpan = 2
Dim cell1 As New TableCell()
cell1.Text = "No. Of Employees"
cell1.HorizontalAlign = HorizontalAlign.Center
cell1.ColumnSpan = 2
gvDetails.Controls(0).Controls.AddAt(0, gvrow__2)
End If
End Sub
End Class

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


kumaran said...

nice code, i have an issue. when i export grid to excel the headers not displayed like age group and no.of employees. how to do, give the suggestions,

Anonymous said...

Thanx. Easy and simple code.

Unknown said...

Suresh I have a girdview from the database FORM. It have 8 columns such as 1.year 2.dept 4.come_time 5.explain 6.encourage 7.discipline

The 4 to 8 columns have some integer values. So now I need to show the percentage of the 4 to 8 columns in the footer of gridview.Please help me @@@@@

Anonymous said...

Thank you very much!! Simple and straight forward.

Sam said...

Please help i am getting compilation errors :(

Unknown said...

how to use loop for loop if we group-columns-in-gridview-header-row

Unknown said...

how to use for loop if we group-columns-in-gridview-header-row

Unknown said...

how to use for loop if we Group Columns in Gridview Header Row & Display Multiple Columns Under Single Column
To save grid data in db

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.