Merging GridView Headers to have multiple Headers in GridView

Wednesday, November 26, 2008

Merging GridView Headers to have multiple Headers in GridView

Posted by amiT jaiN at 6:15 PM

Here is the example to Have multiple headers in a gridView or merging headers in GridView using C# and ASP.NET

For this you need to create GridView header row in RowCreated Event

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grvMergeHeader" runat="server"
BackColor="LightGoldenrodYellow"
BorderColor="Tan" BorderWidth="5px"
CellPadding="3" ForeColor="Black"
GridLines="None" BorderStyle="None"
CellSpacing="2"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
OnRowCreated="grvMergeHeader_RowCreated">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue"
ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod"
ForeColor="DarkSlateBlue"
HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="DepartMentID"
HeaderText="DepartMentID"
SortExpression="DepartMentID" />
<asp:BoundField DataField="DepartMent"
HeaderText="DepartMent"
SortExpression="DepartMent" />
<asp:BoundField DataField="Name"
HeaderText="Name"
SortExpression="Name" />
<asp:BoundField DataField="Location"
HeaderText="Location"
SortExpression="Location" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [DepartMentID],
[DepartMent], [Name], [Location] FROM [Employee]">
</asp:SqlDataSource>
&nbsp;</div>
</form>
</body>
</html>

Now In Code behind, in RowCreated Event of grid view i m creating a new gridview row of header type and than in this row i m adding 2 cells

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void grvMergeHeader_RowCreated
(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
GridView HeaderGrid = (GridView)sender;
GridViewRow HeaderGridRow =
new GridViewRow(0, 0, DataControlRowType.Header,
DataControlRowState.Insert);
TableCell HeaderCell = new TableCell();
HeaderCell.Text = "Department";
HeaderCell.ColumnSpan = 2;
HeaderGridRow.Cells.Add(HeaderCell);

HeaderCell = new TableCell();
HeaderCell.Text = "Employee";
HeaderCell.ColumnSpan = 2;
HeaderGridRow.Cells.Add(HeaderCell);

grvMergeHeader.Controls[0].Controls.AddAt
(0, HeaderGridRow);

}
}
}