Email Password Remember me?  Lost your password?

• Download demo project - 4 Kb

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   

You must Sign In to use this message board.

Per page 102550

FirstPrevNext

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. Sign In·View Thread·PermaLink 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. Sign In·View Thread·PermaLink 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 Sign In·View Thread·PermaLink 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 ? Sign In·View Thread·PermaLink 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 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

Last Visit: 2:55 22 Nov '09     Last Update: 2:55 22 Nov '09 12 Next »