How to merge the header row for the GridView control

• Download source files - 2.77 KB

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:

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.