Subscribe
Please visit my new Web Site https://coderstechzone.com
In most of the times for reporting purpose we need to merge or merging GridView header columns or rows or to use multiple headers in Asp.Net C# Vb.Net code. In this article or Asp.Net C# tutorial i will explain how one can merge or split GridView Header rows or columns. For this example here i took product table. Where In first two columns i will show Brand Name & Category Name & by spliting i will give the name hierarchy. Then i will display product name & after that i will show quantities & split & merge into three columns. So the output look like below:
To implement the above example we need to mastering in the GridView RowCreated event like below:
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
GridView HeaderGrid = (GridView)sender;
GridViewRow HeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
TableCell Cell_Header = new TableCell();
Cell_Header.Text = "Hierarchy";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 2;
HeaderRow.Cells.Add(Cell_Header);
Cell_Header = new TableCell();
Cell_Header.Text = "Product Name";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 1;
Cell_Header.RowSpan = 2;
HeaderRow.Cells.Add(Cell_Header);
Cell_Header = new TableCell();
Cell_Header.Text = "Quantity";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 3;
HeaderRow.Cells.Add(Cell_Header);
GridView1.Controls[0].Controls.AddAt(0, HeaderRow);
}
}
Add the GridView in your page like below:<asp:GridView ID="GridView1" runat="server" Width="800px" AutoGenerateColumns="False" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound" >
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="LightGray" />
<AlternatingRowStyle BackColor="LightGray" />
<Columns>
<asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
<asp:BoundField DataField="Category Name" HeaderText="Category Name" />
<asp:BoundField DataField="Product Name" HeaderText="Product Name" />
<asp:BoundField DataField="Logical" HeaderText="Logical" />
<asp:BoundField DataField="Physical" HeaderText="Physical" />
<asp:BoundField DataField="Quarentine" HeaderText="Quarentine" />
</Columns>
</asp:GridView>
One another tricks is to merge middle row for product name. Here i have merged the row cells within RowCreated event. The problem is we need to set visible false for bind column 'product name' in GridView HTML. To do that here i choose the GridView RowDataBound event. So that you can do what you require in runtime. Look how we can control to merging row cells:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
e.Row.Cells[2].Visible = false;
}
The complete HTML MARKUP code is:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_Header_Row_Split_Merge.aspx.cs" Inherits="GridView_Header_Row_Split_Merge" %>
<!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>How to merge or split gridView header row</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Width="800px" AutoGenerateColumns="False" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound" >
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="LightGray" />
<AlternatingRowStyle BackColor="LightGray" />
<Columns>
<asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
<asp:BoundField DataField="Category Name" HeaderText="Category Name" />
<asp:BoundField DataField="Product Name" HeaderText="Product Name" />
<asp:BoundField DataField="Logical" HeaderText="Logical" />
<asp:BoundField DataField="Physical" HeaderText="Physical" />
<asp:BoundField DataField="Quarentine" HeaderText="Quarentine" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
The complete Server side code is:using System;
using System.Web.UI.WebControls;
public partial class GridView_Header_Row_Split_Merge : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], " +
"P.Name [Product Name],P.Logical,P.Physical,P.Quarentine FROM " +
"Brand B, Category C, Product P " +
"WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
GridView1.DataBind();
}
}
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
GridView HeaderGrid = (GridView)sender;
GridViewRow HeaderRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
TableCell Cell_Header = new TableCell();
Cell_Header.Text = "Hierarchy";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 2;
HeaderRow.Cells.Add(Cell_Header);
Cell_Header = new TableCell();
Cell_Header.Text = "Product Name";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 1;
Cell_Header.RowSpan = 2;
HeaderRow.Cells.Add(Cell_Header);
Cell_Header = new TableCell();
Cell_Header.Text = "Quantity";
Cell_Header.HorizontalAlign = HorizontalAlign.Center;
Cell_Header.ColumnSpan = 3;
HeaderRow.Cells.Add(Cell_Header);
GridView1.Controls[0].Controls.AddAt(0, HeaderRow);
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
e.Row.Cells[2].Visible = false;
}
}
Hope now you can merge or split gridview header based on client requirements. Happy programming.
13 comments:
I likje your blog it is really a very nice blog I am enjoy it lot it is really avery nice for us I am very glad to seen thiso one.
This is really a Very Good Article,Helped me a lot and saved my time,
Keep Going
very nice post each and every post i have used in my project
this is very helpfull to me thanks and keep going
sanjana
Excellent - so simple! Thanks a lot.
Thank you for the post, it's very helpful
Hmmm,does it enable the header to stay static while the row vertically scrolling?
Hi,
The post is usefull. But when there is any post back in the page, the header added is gone.
Header should be there when there is post back in the page.
Please help me in this..
Thanks
Jaya
Excelent !
Excellent , easy, useful,helpful,.....
This is the nice post.similar to this i want to span the datarow into two rows. Is there any possibility to do this by asp:GridView.This will very helpful for me.Thanks and look for your suggestions and ideas.
Thank you
Excellent , easy, useful,helpful,Cool..
this works perfect but can u tell me that how can i freeze this double row header...im having issues with it.
I WOULD BE DELIGHTED TO HEAR FROM YOU