Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

Merge Header - GridView/DataGrid

Rate me:
Please Sign up or sign in to vote.
4.39/5 (30 votes)
30 May 2008CPOL1 min read 230.1K   3.5K   69   50
This article shows how we can merge multiple columns into a single column in a GridView using ASP.NET 2.0.

Sample Image - Merge_Header.jpg

Introduction

During development with GridView, we might come across many situations in which we need to extend the GridView for our requirements. For example, we might need to have a separate header other than the default header provided by GridView. In that case, we need to add a new GridView item of type Header. In this article, we will see how to merge two or more columns in a GridView.

Requirement

In this example, we have a simple GridView which fetches data from an XML file and displays that in the table structure. In this GridView, we need to add two additional headers with text "Department" and "Employee". The department column should occupy the first two columns and the Employee column should occupy the rest of the three columns.

Problem

I found in the internet that there are many ways to do this, but we might end up with column alignment issues.

Solution

Here, we are going to see one of the best methods to do this. To have an additional header, we need to add a GridViewRow of type Header to the GridView inside the OnRowCreated event. Here is the code snippet for doing this:

C#
protected void GridView_Merge_Header_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    { 
        //Build custom header.
        GridView oGridView = (GridView)sender;
        GridViewRow oGridViewRow = new GridViewRow(0, 0, 
                    DataControlRowType.Header, DataControlRowState.Insert);
        TableCell oTableCell = new TableCell();
        
                //Add Department
                oTableCell.Text = "Department";
                oTableCell.ColumnSpan = 2;
                oGridViewRow.Cells.Add(oTableCell);

                //Add Employee
                oTableCell = new TableCell();
                oTableCell.Text = "Employee";
                oTableCell.ColumnSpan = 3;
                oGridViewRow.Cells.Add(oTableCell);
                oGridView.Controls[0].Controls.AddAt(0, oGridViewRow);
    }
}

Code for DataGrid (VS.NET 1.0/1.1)

VB
Private Sub DataGrid1_ItemCreated(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
        Handles DataGrid1.ItemCreated
    If e.Item.ItemType = ListItemType.Header Then
        Dim dgItem As DataGridItem
        Dim dgCell As TableCell
        dgItem = New DataGridItem(0, 0, ListItemType.Header)
        dgCell = New TableCell()
        dgCell.ColumnSpan = 2
        dgItem.Cells.Add(dgCell)
        dgCell.Text = "List of Products"
        DataGrid1.Controls(0).Controls.AddAt(0, dgItem)
    End If
End Sub

That's it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questiongood article Pin
Elanchezian10-Dec-12 20:30
Elanchezian10-Dec-12 20:30 
GeneralMy vote of 5 Pin
Jayakumar Selvakani12-Sep-12 20:30
Jayakumar Selvakani12-Sep-12 20:30 
GeneralMy vote of 5 Pin
maheshbisht3-Sep-12 9:57
maheshbisht3-Sep-12 9:57 
QuestionMerge Header of GridView Pin
Sushil Kumar Purohit7-Apr-12 1:51
Sushil Kumar Purohit7-Apr-12 1:51 
GeneralThanks Pin
sbrahma20-May-11 11:08
sbrahma20-May-11 11:08 
GeneralMy vote of 5 Pin
MiguelAJH2-Aug-10 15:30
MiguelAJH2-Aug-10 15:30 
GeneralThanks a lot Pin
Raja S Veeramalla20-Jul-10 0:51
Raja S Veeramalla20-Jul-10 0:51 
QuestionPosition of the new header Pin
Agamotto22-May-09 0:58
Agamotto22-May-09 0:58 
AnswerRe: Position of the new header Pin
Agamotto22-May-09 1:10
Agamotto22-May-09 1:10 
JokeSukriya Pin
grawas14-Apr-09 6:11
grawas14-Apr-09 6:11 
GeneralThanks but i have a problem Pin
Philippe4328-Jan-09 3:57
Philippe4328-Jan-09 3:57 
GeneralTHANKS A LOT !!! Pin
yonatankr11-Nov-08 2:40
yonatankr11-Nov-08 2:40 
GeneralThanks Pin
Sai U9-Sep-08 0:08
Sai U9-Sep-08 0:08 
GeneralThanks Pin
Neykez18-Jun-08 11:47
Neykez18-Jun-08 11:47 
GeneralThanks Pin
cutespice6-Jun-08 5:14
cutespice6-Jun-08 5:14 
GeneralWell... Thanks also! Pin
ronchese17-Mar-08 11:08
ronchese17-Mar-08 11:08 
GeneralBottom pager do not fired event when in sert new row to header Pin
Yoshitomo26-Feb-08 23:03
Yoshitomo26-Feb-08 23:03 
GeneralRe: Bottom pager do not fired event when in sert new row to header Pin
Thiagarajan Rajendran19-Mar-08 6:30
Thiagarajan Rajendran19-Mar-08 6:30 
GeneralRe: Bottom pager do not fired event when in sert new row to header Pin
Yoshitomo19-Mar-08 15:30
Yoshitomo19-Mar-08 15:30 
QuestionGreat Article -- is it possible to simply replace the Header row with text of your choosing?? (ie Dynamically Create the Header Row) Pin
dannykb11121-Feb-08 12:25
dannykb11121-Feb-08 12:25 
GeneralOnRowCreated Pin
K32126-Jan-08 20:50
K32126-Jan-08 20:50 
GeneralSorting.... Pin
amit_ksp3-Aug-07 1:43
amit_ksp3-Aug-07 1:43 
GeneralRe: Sorting.... Pin
Thiagarajan Rajendran8-Aug-07 9:18
Thiagarajan Rajendran8-Aug-07 9:18 
GeneralRe: Sorting.... Pin
amit_ksp8-Aug-07 11:05
amit_ksp8-Aug-07 11:05 
QuestionGreat Code but ... Pin
anikon451-Aug-07 22:25
anikon451-Aug-07 22:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.