Merge/Split GridView header using CSS and code

• Download source/demo - 3.3 KB

Introduction

I had no clue on how to do this in the beginning, maybe I wasn’t trying enough. But everything changed when I knew that a GridView is basically a table during runtime. The code is quite simple. It shows you how to merge or split the header rows or columns of a GridView so you would get a main header row and a sub header row as shown in the image where Class1 is the main header and Year and Mark are the sub headers.

The code

The page is linked to a database which I haven’t attached in this. The structure of the database is simple, it's given below. Please recreate it in MS Access if you would want to try this, or you can change the code.

Name of Ms Access DB = data.mdb 
Location of DB = /App_Data/data.mdb 
Table Name = tbl_main

The design of the table is in the image below:

The data within the table is in the image below:

Now for the code, drag and drop a GridView on to the default page and map it to a DataSource. Then modify the GridView part of your .aspx page to look like the attached source code.

Add the below in the code behind page in the RowCreated event of the GridView:

Protected Sub GridView1_RowCreated(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
    If e.Row.RowType = DataControlRowType.Header Then
        Dim header As GridView = CType(sender, GridView)
        Dim gvr As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)

        Dim tCell As New TableCell
        tCell.Text = "Names"
        tCell.ColumnSpan = 1
        tCell.RowSpan = 2
        tCell.HorizontalAlign = HorizontalAlign.Center
        'tCell.BackColor = Drawing.Color.Black
        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

        tCell = New TableCell
        tCell.Text = "Class1"
        tCell.ColumnSpan = 2
        tCell.HorizontalAlign = HorizontalAlign.Center
        ' tCell.BackColor = Drawing.Color.Black
        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

        tCell = New TableCell
        tCell.Text = ""
        tCell.ColumnSpan = 1
        tCell.RowSpan = 2
        ' tCell.BackColor = Drawing.Color.Black
        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

        tCell = New TableCell
        tCell.Text = "Class2"
        tCell.ColumnSpan = 2
        tCell.HorizontalAlign = HorizontalAlign.Center
        'tCell.BackColor = Drawing.Color.Black
        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

        tCell = New TableCell
        tCell.Text = ""
        tCell.ColumnSpan = 1
        tCell.RowSpan = 2
        tCell.HorizontalAlign = HorizontalAlign.Center

        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

        tCell = New TableCell
        tCell.Text = "Class3"
        tCell.ColumnSpan = 2
        tCell.HorizontalAlign = HorizontalAlign.Center

        tCell.CssClass = "runheader"
        gvr.Cells.Add(tCell)

       
        Dim tbl As Table = TryCast(GridView1.Controls(0), Table)
        If tbl IsNot Nothing Then
            tbl.Rows.AddAt(0, gvr)
        End If

    End If

End Sub

The above code is what modifies and breaks the default header of the table of the GridView and then adds it back to the GridView.

Then comes in the CSS file. All the colours, the image effect, and the dividing lines are given by the CSS file.

The source files are attached and just for the the fun of it there is a code that would give the GridView all those yellow and green colours based on the data in your datasource. Could be useful for something else as well.

Hope it helps.

History

V1: 30 Jan 13.