Click here to Skip to main content
15,880,392 members
Articles / Web Development / IIS

Add an extra header to an ASP.NET DataGrid

Rate me:
Please Sign up or sign in to vote.
3.22/5 (3 votes)
9 Dec 2005CPOL 58.2K   204   19   10
This article explains how to add an extra header item to a standard ASP.NET DataGrid.

Sample Image - grid.jpg

Introduction

This article explains how to add an extra header item to a standard ASP.NET DataGrid.

Using the code

The code is pretty simple. The grid is built using a DataGridTable object. All we have to do is to add a DataGridItem to the Rows collection in the CreateControlHierarchy method of our custom grid. Now I'll let the code talk:

VB
Protected Overrides Sub CreateControlHierarchy(ByVal useDataSource As Boolean)
    MyBase.CreateControlHierarchy(useDataSource)
    If Not ShowExtraHeader Then Return
    If Controls.Count > 0 Then
        'get all grid's items (rows)
        Dim rows As TableRowCollection = DirectCast(Controls(0), Object).Rows
        'create extra header item
        Dim extraHeaderRow As DataGridItem = CreateItem(-1, -1, ListItemType.Header)
        'set an id that will identify it in ItemCreated event
        extraHeaderRow.ID = "extraheader"
        'create an event attached to our item
        Dim extraHeaderRowArgs As New DataGridItemEventArgs(extraHeaderRow)
        'call ItemCreated event
        OnItemCreated(extraHeaderRowArgs)
        'finally add the extra header item to the items's collection
        rows.AddAt(0, extraHeaderRow)
    End If
End Sub

And let's see how we could use this code in a real scenario:

VB
Private Sub g_ItemCreated(ByVal sender As Object, ByVal e _
            As System.Web.UI.WebControls.DataGridItemEventArgs) Handles g.ItemCreated
    If e.Item.ItemType = ListItemType.Header Then
        If e.Item.ID = "extraheader" Then
            Dim refreshCell As New TableCell
            refreshCell.ColumnSpan = 2
            refreshCell.HorizontalAlign = HorizontalAlign.Center
            Dim btnRefresh As New Button
            btnRefresh.Text = "Refresh"
            refreshCell.Controls.Add(btnRefresh)
            AddHandler btnRefresh.Click, AddressOf btnRefresh_Click

            Dim parentsCell As New TableCell
            parentsCell.ColumnSpan = 2
            parentsCell.HorizontalAlign = HorizontalAlign.Center
            parentsCell.Text = "Parents"

            e.Item.Cells.Add(refreshCell)
            e.Item.Cells.Add(parentsCell)
        End If
    End If
End Sub

That's all! Check the demo project to see all the bits.

History

  • Dec. 10, 2005 - Version 1.0.

License

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


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionhow do i remove paging [modified] Pin
maya_zakry3-Jun-07 22:47
maya_zakry3-Jun-07 22:47 
GeneralItem_Databoud Event Pin
jhkss2-Nov-06 9:49
jhkss2-Nov-06 9:49 
GeneralA Better Alternative. Pin
Miguel_TX29-Apr-06 18:40
Miguel_TX29-Apr-06 18:40 
Check out this solution:
http://forums.asp.net/390809/ShowPost.aspx[^]

Here is the C# Equivalent (with some added stuff I did to help those with possible questions):
private void DataGrid1_PreRender(object sender, System.EventArgs e)
{
//This MUST be done in the Pre-Render function. Otherwise will have errors if running this code outside of the PreRender function.
DataGridItem dgItem = new DataGridItem(0,0,ListItemType.Header);
TableCell myCell = new TableCell();
myCell.ColumnSpan = 2; //This Merges Cells together.
myCell.Text = "Test";
myCell.BackColor = Color.Lavender; //Change the back color of a single cell.
myCell.VerticalAlign = VerticalAlign.Middle;//This Centers the text vertically for a single cell.
dgItem.Cells.Add(myCell);
dgItem.HorizontalAlign = HorizontalAlign.Center;//This centers the text for the entire dgItem (which in this case is the additional header we just added).
DataGrid1.Columns[1].HeaderStyle.BackColor = Color.LemonChiffon;//This changes the color for an entire column, not needed, but is neat to see if you were thinking about doing something like this in the future - now you know how to.
DataGrid1.Controls[0].Controls.AddAt(0, dgItem); //Change the integer in the AddAt() function to insert the header somewhere else in the datagrid (like 1 for below the original header, or 5 if for some inexplicable reason you want two totally separated headers with rows of data in between them.
}

Hope you guys liked it! Big Thanks to Jim Ross and his post at forums.ASP.Net website and his source who gave him the original VB code: Anand Hegde (MSFT).
- M
GeneralRe: A Better Alternative. Pin
Gabriel Sirbu30-Apr-06 20:33
Gabriel Sirbu30-Apr-06 20:33 
GeneralRe: A Better Alternative. Pin
Joel Pearson22-May-06 22:04
Joel Pearson22-May-06 22:04 
GeneralRe: A Better Alternative. Pin
Miguel_TX12-Jun-06 20:32
Miguel_TX12-Jun-06 20:32 
GeneralRe: A Better Alternative. Pin
dga20522-Jun-06 4:41
dga20522-Jun-06 4:41 
Generalc# Pin
Mark Lawson29-Dec-05 9:39
Mark Lawson29-Dec-05 9:39 
GeneralRe: c# Pin
syao16825-Feb-06 10:07
syao16825-Feb-06 10:07 
Generalc# Pin
Mark Lawson29-Dec-05 9:38
Mark Lawson29-Dec-05 9: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.