Merge Merging GridView Header Columns Multiple Headers ASP.NET

In this example i m explaining how to Merging Or Merge GridView Header Columns Or Combine Multiple Headers using C# VB.NET In ASP.NET 2.0,3.5,4.0.

For this you need to create GridView header row in RowCreated Event

<asp:GridView ID="grvMergeHeader" runat="server" 
              AutoGenerateColumns="False" 
              DataSourceID="SqlDataSource1" 
              OnRowCreated="grvMergeHeader_RowCreated">
<Columns>
<asp:BoundField DataField="DepartMentID" HeaderText="DepartMentID"/>
<asp:BoundField DataField="DepartMent" HeaderText="DepartMent"/>
<asp:BoundField DataField="Name" HeaderText="Name"/>
<asp:BoundField DataField="Location" HeaderText="Location"/>
</Columns>
</asp:GridView>
 
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [DepartMentID], [DepartMent], [Name], 
              [Location] FROM [Employee]">
</asp:SqlDataSource>

Now In Code behind, in RowCreated Event of grid view i m creating a new gridview row of header type and than in this row i m adding 2 cells

C# CODE
protected void grvMergeHeader_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            GridView HeaderGrid = (GridView)sender;
            GridViewRow HeaderGridRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
            TableCell HeaderCell = new TableCell();
            HeaderCell.Text = "Department";
            HeaderCell.ColumnSpan = 2;
            HeaderGridRow.Cells.Add(HeaderCell);

            HeaderCell = new TableCell();
            HeaderCell.Text = "Employee";
            HeaderCell.ColumnSpan = 2;
            HeaderGridRow.Cells.Add(HeaderCell);

            grvMergeHeader.Controls[0].Controls.AddAt(0, HeaderGridRow);

        }
    }

VB.NET
Protected Sub grvMergeHeader_RowCreated(sender As Object, e As GridViewRowEventArgs)
 If e.Row.RowType = DataControlRowType.Header Then
  Dim HeaderGrid As GridView = DirectCast(sender, GridView)
  Dim HeaderGridRow As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert)
  Dim HeaderCell As New TableCell()
  HeaderCell.Text = "Department"
  HeaderCell.ColumnSpan = 2
  HeaderGridRow.Cells.Add(HeaderCell)

  HeaderCell = New TableCell()
  HeaderCell.Text = "Employee"
  HeaderCell.ColumnSpan = 2
  HeaderGridRow.Cells.Add(HeaderCell)


  grvMergeHeader.Controls(0).Controls.AddAt(0, HeaderGridRow)
 End If
End Sub


Download Sample Code


16 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. I've seen similar solutions to this all over the web, but yours is the only one which does it in the rowcreated event. This solves the problem which I was having in which a postback to the page would "delete" the extra row and cause all sort of havoc because the extra header row wasn't in the viewstate.

    Thx.

    ReplyDelete
  3. It's a very great solution..
    Before I read this, I think it's impossible to make multiple header with Gridview..

    Rizki,
    IT Consultant, Indonesia

    ReplyDelete
  4. Your source Code cannot be downloaded.
    I want to ask how to create like this one:

    data1 col2
    data2 data3
    1 2 3
    5 3 4

    Thanks,

    ReplyDelete
  5. Wow, Great.. its Really Helps to resolve my problem. Good Work. Thanks a lot.

    ReplyDelete
  6. One issue is that if we tried Export to Excel using this code then The headers added additionally are not exported

    ReplyDelete
  7. Excellent code sample. It worked for me. Thank you!

    ReplyDelete
  8. Thank you Very Much, Its help me a lot.

    ReplyDelete
  9. When I try this, I get this error:

    System.EventArgs does not contain a definition for 'Row' and no extension method 'Row' acception a first argument of type 'System.EventArgs' could be found (are you missing a using directive or an assembly reference?

    But I have the same using statements as above. Please help. I've been trying for days to get multiple headers on my datagrid view and I'm so close!

    ReplyDelete
  10. amazing stuff! i love it

    ReplyDelete
  11. Thank You very much.....i wwant to know how to export this to excel in the same format

    ReplyDelete
  12. Good Article.
    But how to export this grid to Excel? The RenderControl(htmlWrite) is not making it. The Header created using grvMergeHeader.Controls[0].Controls.AddAt
    (0, HeaderGridRow); is not rendering into HTML.

    Any Idea?

    ReplyDelete
  13. Thanks buddy... Good Solution

    ReplyDelete
  14. suppose I have a grid view with 10 columns and I want to group 5,6,7 columns under a separate header, How to do it??

    Thanks
    Kishore

    ReplyDelete
  15. How to export Created Multiple header to excel format?

    Plz help me It was very urgent.

    ReplyDelete