Click here to Skip to main content
11,478,174 members (69,015 online)
Click here to Skip to main content

Merge Header - GridView/DataGrid

, 30 May 2008 CPOL 160.9K 2.3K 68
Rate this:
Please Sign up or sign in to vote.
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:

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)

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)

Share

About the Author

Thiagarajan Rajendran
Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

 
QuestionMessage Automatically Removed Pin
5-Jan-14 21:30
professionalRavi.Kumar0215-Jan-14 21:30 
Questiongood article Pin
Elanchezian10-Dec-12 21:30
memberElanchezian10-Dec-12 21:30 
GeneralMy vote of 5 Pin
jai12345678912-Sep-12 21:30
memberjai12345678912-Sep-12 21:30 
GeneralMy vote of 5 Pin
maheshbisht3-Sep-12 10:57
membermaheshbisht3-Sep-12 10:57 
QuestionMerge Header of GridView Pin
Sushil Kumar Purohit7-Apr-12 2:51
memberSushil Kumar Purohit7-Apr-12 2:51 
GeneralThanks Pin
sbrahma20-May-11 12:08
membersbrahma20-May-11 12:08 
GeneralMy vote of 5 Pin
MiguelAJH2-Aug-10 16:30
memberMiguelAJH2-Aug-10 16:30 
GeneralThanks a lot Pin
Member 456881520-Jul-10 1:51
memberMember 456881520-Jul-10 1:51 
QuestionPosition of the new header Pin
Agamotto22-May-09 1:58
memberAgamotto22-May-09 1:58 
AnswerRe: Position of the new header Pin
Agamotto22-May-09 2:10
memberAgamotto22-May-09 2:10 
JokeSukriya Pin
grawas14-Apr-09 7:11
membergrawas14-Apr-09 7:11 
GeneralThanks but i have a problem Pin
Philippe4328-Jan-09 4:57
memberPhilippe4328-Jan-09 4:57 
GeneralTHANKS A LOT !!! Pin
yonatankr11-Nov-08 3:40
memberyonatankr11-Nov-08 3:40 
GeneralThanks Pin
Sai U9-Sep-08 1:08
memberSai U9-Sep-08 1:08 
GeneralThanks Pin
wvl3218-Jun-08 12:47
memberwvl3218-Jun-08 12:47 
GeneralThanks Pin
cutespice6-Jun-08 6:14
membercutespice6-Jun-08 6:14 
GeneralWell... Thanks also! Pin
ronchese17-Mar-08 12:08
memberronchese17-Mar-08 12:08 
GeneralBottom pager do not fired event when in sert new row to header Pin
thanasak.polrak27-Feb-08 0:03
memberthanasak.polrak27-Feb-08 0:03 
GeneralRe: Bottom pager do not fired event when in sert new row to header Pin
Thiagarajan Rajendran19-Mar-08 7:30
memberThiagarajan Rajendran19-Mar-08 7:30 
GeneralRe: Bottom pager do not fired event when in sert new row to header Pin
thanasak.polrak19-Mar-08 16:30
memberthanasak.polrak19-Mar-08 16: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 13:25
memberdannykb11121-Feb-08 13:25 
GeneralOnRowCreated Pin
K32126-Jan-08 21:50
memberK32126-Jan-08 21:50 
GeneralSorting.... Pin
amit_ksp3-Aug-07 2:43
memberamit_ksp3-Aug-07 2:43 
GeneralRe: Sorting.... Pin
Thiagarajan Rajendran8-Aug-07 10:18
memberThiagarajan Rajendran8-Aug-07 10:18 
GeneralRe: Sorting.... Pin
amit_ksp8-Aug-07 12:05
memberamit_ksp8-Aug-07 12:05 
QuestionGreat Code but ... Pin
anikon451-Aug-07 23:25
memberanikon451-Aug-07 23:25 
AnswerRe: Great Code but ... Pin
Thiagarajan Rajendran8-Aug-07 10:20
memberThiagarajan Rajendran8-Aug-07 10:20 
GeneralRe: Great Code but ... Pin
anikon4512-Aug-07 23:14
memberanikon4512-Aug-07 23:14 
GeneralRe: Great Code but ... Pin
Noman Aftab28-Aug-08 1:49
memberNoman Aftab28-Aug-08 1:49 
Generalsmall fix Pin
Prashant Atal14-Jun-07 0:56
memberPrashant Atal14-Jun-07 0:56 
Generalthanks Pin
ceMental5-Jun-07 11:41
memberceMental5-Jun-07 11:41 
GeneralHeader text alignment Pin
milan_np14-May-07 22:55
membermilan_np14-May-07 22:55 
GeneralRe: Header text alignment Pin
milan_np14-May-07 23:07
membermilan_np14-May-07 23:07 
GeneralJhala Jhala Pin
roseline74-Apr-07 4:43
memberroseline74-Apr-07 4:43 
QuestionWhy does this cast not valid? Pin
roseline74-Apr-07 3:39
memberroseline74-Apr-07 3:39 
AnswerRe: Why does this cast not valid? Pin
Thiagarajan Rajendran4-Apr-07 4:43
memberThiagarajan Rajendran4-Apr-07 4:43 
GeneralMerge Header - Gridview/DataGrid Pin
wkrupinsky26-Feb-07 8:45
memberwkrupinsky26-Feb-07 8:45 
AnswerRe: Merge Header - Gridview/DataGrid Pin
Thiagarajan Rajendran26-Feb-07 9:30
memberThiagarajan Rajendran26-Feb-07 9:30 
GeneralRe: Merge Header - Gridview/DataGrid Pin
SumanRoy23-Apr-07 22:52
memberSumanRoy23-Apr-07 22:52 
GeneralRe: Merge Header - Gridview/DataGrid Pin
hhf6415-Aug-07 9:21
memberhhf6415-Aug-07 9:21 
GeneralThanks! IOU1 Pin
webbuilder16-Jan-07 8:21
memberwebbuilder16-Jan-07 8:21 
Your to the point artical was exactly what it needed. No Frills, just the answer!
I really do owe you one for that!

KES

Share the knowledge.
I can use all the help I can get and so do YOU!
KES

GeneralUserControl On the created cells Pin
alam_pune12-Jan-07 8:38
memberalam_pune12-Jan-07 8:38 
QuestionDataGridView? Pin
Jason Law10-Jan-07 20:42
memberJason Law10-Jan-07 20:42 
AnswerRe: DataGridView? Pin
Thiagarajan Rajendran16-Jan-07 8:49
memberThiagarajan Rajendran16-Jan-07 8:49 
GeneralThanks!!! Pin
VikramSinghGehlot29-Nov-06 8:37
memberVikramSinghGehlot29-Nov-06 8:37 
GeneralProblem with updating Pin
zarko.petrovic20-Nov-06 1:59
memberzarko.petrovic20-Nov-06 1:59 
GeneralRe: Problem with updating Pin
Thiagarajan Rajendran20-Nov-06 5:12
memberThiagarajan Rajendran20-Nov-06 5:12 
GeneralRe: Problem with updating Pin
zarko.petrovic20-Nov-06 21:10
memberzarko.petrovic20-Nov-06 21:10 
GeneralRe: Problem with updating Pin
Thiagarajan Rajendran21-Nov-06 5:20
memberThiagarajan Rajendran21-Nov-06 5:20 
GeneralDatagrid Code Pin
Thiagarajan Rajendran20-Oct-06 9:38
memberThiagarajan Rajendran20-Oct-06 9:38 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 30 May 2008
Article Copyright 2006 by Thiagarajan Rajendran
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid