Click here to Skip to main content
Click here to Skip to main content

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

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

 
AnswerRe: Great Code but ... PinmemberThiagarajan Rajendran8-Aug-07 9:20 
GeneralRe: Great Code but ... Pinmemberanikon4512-Aug-07 22:14 
GeneralRe: Great Code but ... PinmemberNoman Aftab28-Aug-08 0:49 
Generalsmall fix PinmemberPrashant Atal13-Jun-07 23:56 
Generalthanks PinmemberceMental5-Jun-07 10:41 
GeneralHeader text alignment Pinmembermilan_np14-May-07 21:55 
GeneralRe: Header text alignment Pinmembermilan_np14-May-07 22:07 
GeneralJhala Jhala Pinmemberroseline74-Apr-07 3:43 
It was my fault.
It does work properly.
Thanks!!!Laugh | :laugh:
QuestionWhy does this cast not valid? Pinmemberroseline74-Apr-07 2:39 
AnswerRe: Why does this cast not valid? PinmemberThiagarajan Rajendran4-Apr-07 3:43 
GeneralMerge Header - Gridview/DataGrid Pinmemberwkrupinsky26-Feb-07 7:45 
AnswerRe: Merge Header - Gridview/DataGrid PinmemberThiagarajan Rajendran26-Feb-07 8:30 
GeneralRe: Merge Header - Gridview/DataGrid PinmemberSumanRoy23-Apr-07 21:52 
GeneralRe: Merge Header - Gridview/DataGrid Pinmemberhhf6415-Aug-07 8:21 
GeneralThanks! IOU1 Pinmemberwebbuilder16-Jan-07 7:21 
GeneralUserControl On the created cells Pinmemberalam_pune12-Jan-07 7:38 
QuestionDataGridView? PinmemberJason Law10-Jan-07 19:42 
AnswerRe: DataGridView? PinmemberThiagarajan Rajendran16-Jan-07 7:49 
GeneralThanks!!! PinmemberVikramSinghGehlot29-Nov-06 7:37 
GeneralProblem with updating Pinmemberzarko.petrovic20-Nov-06 0:59 
GeneralRe: Problem with updating PinmemberThiagarajan Rajendran20-Nov-06 4:12 
GeneralRe: Problem with updating Pinmemberzarko.petrovic20-Nov-06 20:10 
GeneralRe: Problem with updating PinmemberThiagarajan Rajendran21-Nov-06 4:20 
GeneralDatagrid Code PinmemberThiagarajan Rajendran20-Oct-06 8: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 | Mobile
Web01 | 2.8.140827.1 | Last Updated 30 May 2008
Article Copyright 2006 by Thiagarajan Rajendran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid