Cómo mostrar múltiples columnas en el encabezado de un GridView con ASP.NET

aprende asp.net

En ocasiones es posible que necesitemos mostrar varias columnas en una sola columna en el encabezado de un GridView, el mejor ejemplo es como lo hacemos normalmente en un archivo de Excel, tal vez puedas entender a lo que me refiero viendo la imagen del artículo.

Para hacer este tipo de cosas podemos utilizar el evento RowDataBound para dar formato a la fila de encabezado del GridView. Creo que cuando mire el código puede ver que es muy sencillo hacer esto. Así que sin perder el tiempo voy a proporcionarle el código para realizar esto.

HTML

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Row_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server"
        onrowdatabound="GridView1_RowDataBound">
    </asp:GridView>

    </div>
    </form>
</body>
</html>

VB.NET

Imports System.Data

Partial Class Row_Default
    Inherits System.Web.UI.Page
    Shared dt As DataTable = Nothing
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        CreateDataTable()
    End Sub
    Private Sub CreateDataTable()

        If dt Is Nothing Then
            Dim cols As String() = {"Age Group", "Admin", "Systems", "HR", "MX"}
            Dim data As String(,) = {{"18-25", "25", "20", "35", "40"}, {"25-35", "25", "75", "65", "45"}, {"35-45", "25", "35", "20", "16"}}
            dt = New DataTable()
            For Each str As String In cols
                dt.Columns.Add(str)
            Next
            For i As Integer = 0 To 2
                Dim dr As DataRow = dt.NewRow()
                For j As Integer = 0 To 4
                    dr(j) = data(i, j)
                Next
                dt.Rows.Add(dr)
            Next
        End If
        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub

    Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
        Dim gvRow As GridViewRow = e.Row
        If gvRow.RowType = DataControlRowType.Header Then
            If gvRow.Cells(0).Text = "Age Group" Then
                gvRow.Cells.Remove(gvRow.Cells(0))
                Dim gvHeader As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert)
                Dim headerCell0 As New TableCell() With { _
                     .Text = "Age Group", _
                     .HorizontalAlign = HorizontalAlign.Center, _
                     .RowSpan = 2 _
                }
                Dim headerCell1 As New TableCell() With { _
                     .Text = "No. Of Employees", _
                     .HorizontalAlign = HorizontalAlign.Center, _
                     .ColumnSpan = 4 _
                }
                gvHeader.Cells.Add(headerCell0)
                gvHeader.Cells.Add(headerCell1)
                GridView1.Controls(0).Controls.AddAt(0, gvHeader)
            End If
        End If
    End Sub
End Class

Espero que todos hayan disfrutado el ejemplo, pero sobre todo les puede ayudar en sus proyectos.