Thursday, January 21, 2010

Merge merging or Split spliting GridView Header Row or columns in Asp.Net 2.0 / 3.5




Please visit my new Web Site WWW.Codedisplay.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.

14 comments:

universityloveconnection said...

I was going to write a similar blog concerning this topic, you beat me to it. You did a nice job! Thanks and well add your RSS to come categories on our blogs. Thanks so much, Jon B.dating website

cheap carte sdhc video said...

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.

NareshKumar said...

This is really a Very Good Article,Helped me a lot and saved my time,
Keep Going

Anonymous said...

very nice post each and every post i have used in my project

Anonymous said...

this is very helpfull to me thanks and keep going
sanjana

lucyconnuk said...

Excellent - so simple! Thanks a lot.

Anonymous said...

Thank you for the post, it's very helpful

anitarahma's corner said...

Hmmm,does it enable the header to stay static while the row vertically scrolling?

Anonymous said...

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

Anonymous said...

Excelent !

Anonymous said...

Excellent , easy, useful,helpful,.....

Anonymous said...

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.

Anonymous said...

Thank you

Excellent , easy, useful,helpful,Cool..

Anonymous said...

this works perfect but can u tell me that how can i freeze this double row header...im having issues with it.

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash