Posted by: Red Souldier | June 12, 2009

Create Multiple row / group header in gridview ASP.NET

This article shows how to create multiple row / group header in gridview

group header

first you need to add gridview to database and set the datasource connection.
After you have done with all of that, you just add this function to your code

  Public Sub GetMultiRowHeader(ByVal e As GridViewRowEventArgs, ByVal GetCels As SortedList)

        If e.Row.RowType = DataControlRowType.Header Then
            Dim row As GridViewRow
            Dim enumCels As IDictionaryEnumerator = GetCels.GetEnumerator()

            row = New GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal)
            While enumCels.MoveNext()

                Dim count As String() = enumCels.Value.ToString().Split(Convert.ToChar(","))
                Dim Cell As TableCell
                Cell = New TableCell()
                Cell.RowSpan = Convert.ToInt16(count(2).ToString())
                Cell.ColumnSpan = Convert.ToInt16(count(1).ToString())
                Cell.Controls.Add(New LiteralControl(count(0).ToString()))
                Cell.HorizontalAlign = HorizontalAlign.Center
                Cell.ForeColor = System.Drawing.Color.White
            End While

            e.Row.Parent.Controls.AddAt(0, row)
        End If
    End Sub

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        'Everytime you want to add new rows header, you creat new formatcells variable
        Dim formatCells As New SortedList
        'Format cells format:"
        ' formatCells.Add(<Column number>, <Header Name,number of column to colspan, number of row to rowspan>)

        formatCells.Add("1", "ROW SPAN,1,2")
        formatCells.Add("2", "TopGroup,4,1")
        Dim formatcells2 As New SortedList
        formatcells2.Add("1", "Subgroup1,2,1")
        formatcells2.Add("2", "Subgroup2,2,1")
        GetMultiRowHeader(e, formatcells2)
        GetMultiRowHeader(e, formatCells)
    End Sub

The original code is taken from this blog



  1. Dude I’ve got a problem with your example, when I execute the page, it doesn’t see the line on the new cell created. Do you have the same problem? I don’t know how can I solve it! please help!. The code works very well, it only has that mistake

    • you might want to add border width or color into ur grid 🙂

  2. Thank you so much for your code. It is exactly what I want.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


%d bloggers like this: