Introduction:
Here
I will explain how to group columns in asp.net
gridview
header row in C# and VB.NET
or show multiple columns under single column in asp.net
gridview.
Description:
In
previous articles I explained Show Gridview row details in tooltip, Show tooltip for gridview header columns, jQuery change tooltip style in asp.net, Add tooltip to dropdownlist items in asp.net, Create simple tooltip with jQuery UI plugin, Asp.net Interview questions, Highlight Gridview records based on search and many
articles relating to Gridview,
SQL, jQuery,asp.net,
C#,VB.NET.
Now I will explain how to group columns in gridview
in asp.net with C#
and VB.NET.
To
group columns in gridview we need to write the code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Group Gridview Columns in asp.net</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:GridView ID="gvDetails"
AutoGenerateColumns="false"
CellPadding="5"
runat="server"
OnRowDataBound="gvDetails_RowDataBound">
<Columns>
<asp:BoundField HeaderText="UserId" DataField="UserId" />
<asp:BoundField HeaderText="UserName" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:BoundField HeaderText="Location" DataField="Location" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
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)
{
BindGridview();
}
}
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;
gvDetails.DataBind();
}
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;
gvrow.Cells.Add(cell0);
gvrow.Cells.Add(cell1);
gvDetails.Controls[0].Controls.AddAt(0,
gvrow);
}
}
|
VB.NET
Code
|
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
BindGridview()
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
gvDetails.DataBind()
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
gvrow__2.Cells.Add(cell0)
gvrow__2.Cells.Add(cell1)
gvDetails.Controls(0).Controls.AddAt(0,
gvrow__2)
End If
End Sub
End Class
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
8 comments :
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,
Thanx. Easy and simple code.
Suresh I have a girdview from the database FORM. It have 8 columns such as 1.year 2.dept 3.name 4.come_time 5.explain 6.encourage 7.discipline 8.care
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 @@@@@
Thank you very much!! Simple and straight forward.
Please help i am getting compilation errors :(
how to use loop for loop if we group-columns-in-gridview-header-row
how to use for loop if we group-columns-in-gridview-header-row
how to use for loop if we Group Columns in Asp.net Gridview Header Row & Display Multiple Columns Under Single Column
To save grid data in db
Note: Only a member of this blog may post a comment.