Click here to Skip to main content
15,867,488 members
Articles / Web Development / ASP.NET

How to merge the header row for the GridView control

Rate me:
Please Sign up or sign in to vote.
3.09/5 (7 votes)
14 Aug 2006CPOL 69.3K   259   24   5
How to merge the header row for the GridView control.

Sample Image - Merge_GridView_Header.jpg

Introduction

This very short article explains an easy way to merge the header columns for the GridView control. It works like the colspan property in HTML tables. This article is based on another one describing how to bind XML data to a GridView: How to bind an XML file to a GridView.

The Code

First, insert an event handler for the RowCreated event into your website. Then, check whether the new row is of type DataControlRowType.Header. If it is a header row, remove it and add a new TableCell.

Here is the code for this task:

VB
Protected Sub GridView1_RowCreated(ByVal sender As Object, _
              ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
              Handles GridView1.RowCreated
    If e.Row.RowType = DataControlRowType.Header Then
        Dim oCell As New TableCell
        oCell.ColumnSpan = e.Row.Cells.Count
        e.Row.Cells.Clear()
        oCell.Text = "Merged header"
        e.Row.Cells.Add(oCell)
    End If
End Sub

The ColumnSpan property is set to the amount of cells generated by the GridView. Next, remove the header using e.Row.Cells.Clear. Finally, assign the Text property for the new header and add it to the GridView.

License

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


Written By
Web Developer
Germany Germany
Florian works as consultant for change- and configuration management for about 7 years. In this environment he is often forced to work with unix, perl and shell scripts.

For more information about change- and configuration management (espacially Serena Dimensions) visit: www.venco.de

For video tutorials about asp.net, ajax, gridviews, ... (in german) visit: www.siore.com

Comments and Discussions

 
QuestionMerging DataRows with RowSpan gives wierd output, why? Pin
Nhilesh B20-Dec-07 18:23
Nhilesh B20-Dec-07 18:23 
I am not able to merge cell type of "DataControlRowType.DataRow".

If I to use the RowSpan property, I am not able to merge cells properly.

My data is like:

SECTION 1 : CHAPTER 1: PAGES 1-100
SECTION 1 : CHAPTER 1: PAGES 100-200
SECTION 1 : CHAPTER 1: PAGES 200-300
SECTION 1 : CHAPTER 1: PAGES 300-400
SECTION 1 : CHAPTER 2: PAGES 1-150
SECTION 1 : CHAPTER 2: PAGES 150-250
SECTION 1 : CHAPTER 2: PAGES 250-350
SECTION 2 : CHAPTER 3: PAGES 1-200
SECTION 2 : CHAPTER 3: PAGES 200-400

I want to display GridView as:

SECTION 1 : CHAPTER 1: PAGE 1-100
: : PAGES 100-200
: : PAGES 200-300
: : PAGES 300-400
: CHAPTER 2: PAGES 1-150
: : PAGES 150-250
: : PAGES 250-350
SECTION 2 : CHAPTER 3: PAGES 1-200
: : PAGES 200-400

(Hidden issue is, I am also not knowing value to be set for RowSpan property, well in advance.)

Can you suggest somthing?
Regards
Nhilesh Baua

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.