Merge Header - Gridview/DataGrid

Download demo project - 4 Kb

Sample Image - Merge_Header.jpg

Introduction

During development with GridView, we might come across many situations in which we need to extend GridView for our requirements. For example, we need to have a separate header other than the header provided by GridView. In that case we need to add new GridView item of header type. In this article we will see how merge two or more columns.

Requirement

In this example we have simple GridView which is fetching data from xml file and displaying that in the table structure using GridView. In this GridView, we need to add two additional Header with text "Department" and "Employee". First department column should occupy first two columns and Employee column should occupy rest three columns.

Problem

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

Solution

Here we are going to see one of the best method to do that. To have additional header, we need to add one GridViewRow of header type to GridView inside OnRowCreated event method. 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);
    }
}

Below 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.

You must Sign In to use this message board.


Per page

Position of the new header
Agamotto

1:58 22 May '09

hi guys, the example is working fine but i don't know how to set the position of the new header. it always created in the first position of the grid, but i want it on the third position. could anyone help me? Tks a lot.
Sign In·View Thread·PermaLink

Re: Position of the new header
Agamotto

2:10 22 May '09

ok, my workaround was to create a first header without a text to be in the first and second position and a another one to be on the position i want. is there a better way? tks in advance
Sign In·View Thread·PermaLink

Sukriya
grawas

7:11 14 Apr '09

Many thanks to you man.. Solve many grid view problems in my project
Sign In·View Thread·PermaLink

Thanks but i have a problem
Philippe43

4:57 28 Jan '09

Hello,
I am a french men, so me english words are not very good, and i hope you'll understand my problem.
I thank you very much for for the very good code which you accomplished.

I have a datagrid mapped on a local table as :

Dim myDataView As DataView
myDataView = New DataView(TableLocale)
AdsGrid.DataSource = myDataView
Page.DataBind()

I add a new row in the header of my datagrid :

If e.Item.ItemType = ListItemType.Header Then
Dim dgItemHeader As New DataGridItem _
(0, 0, ListItemType.Header)
Dim fcell As TableCell
Dim i As Integer
For i = 0 To 3
fcell = New TableCell
fcell.ColumnSpan = 1
Select Case i
Case 0
fcell.ColumnSpan = 1
fcell.Text = " "
Case 1
fcell.ColumnSpan = 1
fcell.Text = " "
Case 2
fcell.ColumnSpan = 2
fcell.Text = "SUR PERIODE DU " & Session("DateDebut") & " au " & Session("DateFin")
Case 3
fcell.ColumnSpan = 2
fcell.Text = "SUR LE STOCK"
End Select
fcell.HorizontalAlign = HorizontalAlign.Center
dgItemHeader.Cells.Add(fcell)
Next i
AdsGrid.Controls(0).Controls.AddAt(0, dgItemHeader)
End If

this walks very well.
A column of my datagrid is a hyperlink column. When I click on the last line, the redirection does not occur and my datagrid is brought forward : in the first line, i have the header column of my local table, and my last line in gone.
If I click on any other line, this works perfectly

I think that my datagrid did not take into account the added line.
I do not find resolution.
Can you help me ?

Thank you very much.

THANKS A LOT !!!
yonatankr

3:40 11 Nov '08

THANK YOU !!!
Sign In·View Thread·PermaLink

Thanks
Sai U

1:08 9 Sep '08


Sign In·View Thread·PermaLink

Thanks
wvl32

12:47 18 Jun '08

Hi! Thank you, works perfectly.
Sign In·View Thread·PermaLink

Thanks
cutespice

6:14 6 Jun '08

Good job, it works.
Sign In·View Thread·PermaLink

Well... Thanks also!
ronchese

12:08 17 Mar '08

Quick and concise. TY!
Sign In·View Thread·PermaLink

Bottom pager do not fired event when in sert new row to header
thanasak.polrak

0:03 27 Feb '08

After i add new header row to gridview follow you guide code. i found that i have problem when use paging any ideas?
Sign In·View Thread·PermaLink

Re: Bottom pager do not fired event when in sert new row to header
Thiagarajan Rajendran

7:30 19 Mar '08

Hello, Sorry for late replay... Have you solved the problem? If it still persists, let me know. Thanks! Rajendran Thiagarajan. Senior .Net Developer.
Sign In·View Thread·PermaLink

Re: Bottom pager do not fired event when in sert new row to header
thanasak.polrak

16:30 19 Mar '08

Hi Rajendran, Thank for reply, my problem is still exist. I try to find solution for it. If you have any idea please let me know. Thank you
Sign In·View Thread·PermaLink

Great Article -- is it possible to simply replace the Header row with text of your choosing?? (ie Dynamically Create the Header Row)
dannykb111

13:25 21 Feb '08

I have a fixed header that loses it's "FIX" once I add the new row. Can someone help me to "simply" (as if any of this is simple?!?) replace the header row with my newly "dynamically" created row. Any help would be greatly greatly appreciated !!! Thanks Dan Kudos on the article -- very impressive@@
Sign In·View Thread·PermaLink

OnRowCreated
K321

21:50 26 Jan '08

Hi, it's working great, thanks a lot. But maybe you should add to your article that the function created neeeds to be assigned to the OnRowCreated-Event of the gridview.
Sign In·View Thread·PermaLink

Sorting....
amit_ksp

2:43 3 Aug '07

I want sorting by clicking a column header.... any Idea??
Sign In·View Thread·PermaLink

Re: Sorting....
Thiagarajan Rajendran

10:18 8 Aug '07

Instead of putting simple text, you have to put LinkButton control.

Something like this: LinkButton lb = new LinkButton();
lb.ID = "LinkButtonSortHeader1";
lb.Text = "Department";
lb.OnClickClient="__doPostBack('ctl00$Sort$LinkButtonSortHeader1',''); return false;"

//Add Department
oTableCell.Controls.Add(lb);
oTableCell.ColumnSpan = 2;
oGridViewRow.Cells.Add(oTableCell);

Hope this would help you!

Thanks!
Rajendran Thiagarajan.

Re: Sorting....
amit_ksp

12:05 8 Aug '07

Thanks, I did it the same way:
Just one change:

LinkButton Ltitle = new LinkButton();
Ltitle.Text = "Project Title";
Ltitle.Click +=new EventHandler(LinkTitle_Click);
titleCell.Width = 220;
titleCell.Controls.Add(Ltitle);

//than just mapped it to GridView Sorting
protected void LinkTitle_Click(object sender, EventArgs e)
{
//Default gridView Sorting function
gridView_Sorting(this, new GridViewSortEventArgs("ProjectName", SortDirection.Ascending));
}

Amit

Great Code but ...
anikon45

23:25 1 Aug '07

Hi Thanks for your code but I would like to have a header with data form the database... How would you do that ???
Sign In·View Thread·PermaLink

Re: Great Code but ...
Thiagarajan Rajendran

10:20 8 Aug '07

I didn't get you., Can you explain this in detail? Thanks! Rajendran Thiagarajan
Sign In·View Thread·PermaLink	2.00/5

Re: Great Code but ...
anikon45

23:14 12 Aug '07

You wrote 'department' and 'employee' but if I have a gridview which takes in params the state of the employee and in the header I want the state's name. ex:

SELECT * FROM employee WHERE statecode = params

----------------------------------------------------------------
| Header State Name (from database)                            |
----------------------------------------------------------------
Employee Name       | Employee Mail       | Employee tel.      |
...                 |                     |                    |
----------------------------------------------------------------

Something like that, is that clear ?

Re: Great Code but ...
Noman Aftab

1:49 28 Aug '08

That params mught be coming from a user unput, probably a dropdownlist. So instead of using "Department" for header text you can you someting like cboState.SelectedItem.Text Noman Muhammad Aftab, Software Mechanic
Sign In·View Thread·PermaLink

small fix
Prashant Atal

0:56 14 Jun '07

Your solution works fine. The only change would really help if you have the pager activated for the top and bottom. oGridView.Controls(0).Controls.AddAt(1, oGridViewRow) Just changing this line would help and the header will not then float over the top of the Pager .
Sign In·View Thread·PermaLink	5.00/5

thanks
ceMental

11:41 5 Jun '07

I searched all over the internet for this. This works great. Thank you for your article.
Sign In·View Thread·PermaLink

Header text alignment
milan_np

22:55 14 May '07

Thanks for nice article. This is what I've been looking for. However, I still have problem with header text alignment. No matter what I do, I get the text aligned left in IE. But in firefox, it is working just fine and shown in the center.
Sign In·View Thread·PermaLink	2.00/5

Re: Header text alignment
milan_np

23:07 14 May '07

Thanks. I got it working now. It was the style sheet in CSS file which was overriding the setting. Thanks for the great article.
Sign In·View Thread·PermaLink