Click here to Skip to main content
13,796,389 members
Click here to Skip to main content
Add your own
alternative version


68 bookmarked
Posted 20 Oct 2006
Licenced CPOL

Merge Header - GridView/DataGrid

, 30 May 2008
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


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
Software Developer (Senior)
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Jayakumar Selvakani12-Sep-12 21:30
memberJayakumar Selvakani12-Sep-12 21:30 

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.

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