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

Merging DataGrid Header Columns

, 24 Apr 2006
Rate this:
Please Sign up or sign in to vote.
This article describes the simple trick to merge the header columns of a DataGrid at run-time.

Introduction

This article describes a simple trick to merge the header columns of a DataGrid at run-time.

Background

I found a similar solution: Merge DataGrid Header, but I wanted to do this in 2-3 lines of code. So, I tried to use the members of the DataGrid to achieve the results.

Using the code

In the ItemCreated event of the DataGrid, catch the header item of the DataGrid. Suppose you want to merge n columns (cells of the header row), then remove n-1 cells from the header item. Then, make the column span property of the remaining cell equal to n. Then, add a table to the cell according to your requirements. The code below demonstrates the merging of two columns, which will result as shown in the above diagram.

C#

private void  Sub Datagrid1_ItemCreated(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs e )
{
    //If Header item
    
    If (e.Item.ItemType = = ListItemType.Header)
    {
        e.Item.Cells.RemoveAt(2);
        e.Item.Cells(1).ColumnSpan = 2;
        //Insert the table shown in the diagram 3
        // to the Text property of the Cell
        e.Item.Cells(1).Text = "<table style='FONT-WEIGHT: bold; WIDTH:" + 
              " 100%; COLOR: white; TEXT-ALIGN: center'><tr align" + 
              " =center><td colspan = 2 style='BORDER-BOTTOM:" + 
              " cccccc 1pt solid'>Name</td></tr>" + 
              "<tr align =center ><td style ='BORDER-RIGHT:" + 
              " cccccc 1pt solid'>F Name</td><td>L" + 
              " Name</td></tr></table>";
    }  
}

VB.NET

Private Sub Datagrid1_ItemCreated(ByVal sender As _
         Object, ByVal e System.Web.UI.WebControls.DataGridItemEventArgs)_
         Handles Datagrid1_ItemCreated 
    'If Header item
    
    If e.Item.ItemType = ListItemType.Header Then
       e.Item.Cells.RemoveAt(2)
       e.Item.Cells(1).ColumnSpan = 2
       'Insert the table shown in the diagram 3 to the Text property of the Cell
       e.Item.Cells(1).Text = "<table style='FONT-WEIGHT: bold;" & _ 
         " WIDTH: 100%; COLOR: white; TEXT-ALIGN: center'><tr" & _ 
         " align =center><td colspan = 2 style='BORDER-BOTTOM:" & _ 
         " cccccc 1pt solid'>Name</td></tr>" & _
         "<tr align =center ><td style ='BORDER-RIGHT:" & _ 
         " cccccc 1pt solid'>F Name</td><td>L" & _ 
         " Name</td></tr></table>"
    End If  
End Sub

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Jayaprakash V
Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

 
Generalthis makes the table inaccessible Pinmemberisunshine29-Jul-08 4:58 
GeneralRe: this makes the table inaccessible PinmemberWillem_6367-Oct-08 4:49 

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
Web04 | 2.8.140814.1 | Last Updated 24 Apr 2006
Article Copyright 2006 by Jayaprakash V
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid