Click here to Skip to main content
15,400,312 members
Articles / Web Development / ASP.NET
Posted 20 Oct 2006


69 bookmarked

Merge Header - GridView/DataGrid

Rate me:
Please Sign up or sign in to vote.
4.39/5 (30 votes)
30 May 2008CPOL1 min read
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


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.


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.


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


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;

                //Add Employee
                oTableCell = new TableCell();
                oTableCell.Text = "Employee";
                oTableCell.ColumnSpan = 3;
                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
        dgCell.Text = "List of Products"
        DataGrid1.Controls(0).Controls.AddAt(0, dgItem)
    End If
End Sub

That's it.


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


About the Author

Thiagarajan Rajendran
United States United States
No Biography provided

Comments and Discussions

QuestionWhy does this cast not valid? Pin
roseline74-Apr-07 2:39
Memberroseline74-Apr-07 2:39 
AnswerRe: Why does this cast not valid? Pin
Thiagarajan Rajendran4-Apr-07 3:43
MemberThiagarajan Rajendran4-Apr-07 3:43 
GeneralMerge Header - Gridview/DataGrid Pin
wkrupinsky26-Feb-07 7:45
Memberwkrupinsky26-Feb-07 7:45 
AnswerRe: Merge Header - Gridview/DataGrid Pin
Thiagarajan Rajendran26-Feb-07 8:30
MemberThiagarajan Rajendran26-Feb-07 8:30 
GeneralRe: Merge Header - Gridview/DataGrid Pin
SumanRoy23-Apr-07 21:52
MemberSumanRoy23-Apr-07 21:52 
GeneralRe: Merge Header - Gridview/DataGrid Pin
hhf6415-Aug-07 8:21
Memberhhf6415-Aug-07 8:21 
GeneralThanks! IOU1 Pin
Yankee Imperialist Dog!16-Jan-07 7:21
MemberYankee Imperialist Dog!16-Jan-07 7:21 
GeneralUserControl On the created cells Pin
miah alom12-Jan-07 7:38
Membermiah alom12-Jan-07 7:38 
Thats for the usefull article. I was hoping if there is a way to put usercontrol inside the newly created header cells. That would be a great help.

QuestionDataGridView? Pin
Jason Law10-Jan-07 19:42
MemberJason Law10-Jan-07 19:42 
AnswerRe: DataGridView? Pin
Thiagarajan Rajendran16-Jan-07 7:49
MemberThiagarajan Rajendran16-Jan-07 7:49 
GeneralThanks!!! Pin
VikramSinghGehlot29-Nov-06 7:37
MemberVikramSinghGehlot29-Nov-06 7:37 
GeneralProblem with updating Pin
zarko.petrovic20-Nov-06 0:59
Memberzarko.petrovic20-Nov-06 0:59 
GeneralRe: Problem with updating Pin
Thiagarajan Rajendran20-Nov-06 4:12
MemberThiagarajan Rajendran20-Nov-06 4:12 
GeneralRe: Problem with updating Pin
zarko.petrovic20-Nov-06 20:10
Memberzarko.petrovic20-Nov-06 20:10 
GeneralRe: Problem with updating Pin
Thiagarajan Rajendran21-Nov-06 4:20
MemberThiagarajan Rajendran21-Nov-06 4:20 
GeneralDatagrid Code Pin
Thiagarajan Rajendran20-Oct-06 8:38
MemberThiagarajan Rajendran20-Oct-06 8:38 

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.