Inicio > ASP .Net > GridView anidado en ASP .Net

GridView anidado en ASP .Net

Miércoles, 28 de enero de 2009 Dejar un comentario Ir a comentarios

En ocasiones, en nuestras aplicaciones web con ASP .Net necesitamos mostrar datos en una cuadricula pero agrupando algunos registros. Algo así como el típico caso de Maestro Detalle, pero el detalle dentro de la misma grilla. En ASP .Net esto se resuelve fácilmente con el control GridView, para obtener el resultado siguente:

GridView Anidado

El gráfico anterior muestra a un GridView que muestra los datos como maestro detalle. Ahora veremos como es posible hacer esto en una aplicación.

En el caso anterior, la grilla principal tiene 3 columnas, una para el Id. Cat., la segunda para la Categoría y la tercera, será un Template que contendrá otro GridView en su ItemTemplate, esa es la parte fácil; la parte más fácil se da en el evento RowDataBound del GridView principal, ya que este evento se ejecuta cada vez que se enlaza una fila del gridview a los datos que mostrará.

Ya en este evento lo que se debe hacer es simplemente crear una vista de la tabla de detalle filtrando los datos que necesitamos por el id de la tabla maestro. Para poder acceder al GridView que se encuentra en la tercera columnna de la grilla principal simplemente aplicamos una conversión del objeto en la coluna correspondiente, tal y como se muestra en la linea:

GridView gdv = (GridView)e.Row.Cells[2].FindControl(“gdvProductos”);

Hay que considerar que el evento RowDataBoundse ejecuta segun la cantidad de registros que se muestran en el GirdView es decir, si tu GridView tiene 10 filas, este evento se ejecutará 10 veces.

Y el título de las cabeceras? Pues eso es mas fácil aún, se trata de dibujar la tabla HTML dentro de las etiquetas HeaderTemplate de la tercera columna y listo!

Espero que les sea de utilidad.

Descargar Ejemplo GridView Anidado

Saludos.

Categories: ASP .Net
 

  1. miry
    Jueves, 23 de julio de 2009 a las 17:44 | #1

    este ejemplo me ayudo mucho gracias

  2. Luis
    Martes, 28 de julio de 2009 a las 22:32 | #2

    Un ejemplo buenisimo …
    gracias por la ayuda.

  3. Ignacio
    Miércoles, 9 de septiembre de 2009 a las 15:46 | #3

    Excelente ejemplo… Muchas Gracias Hanz !!!…
    Un abrazo.

    PD: Te envio el codigo por detras en VB para que agregues si te interesa al ejemplo (para evitar a otros usuarios tener que convertir el C#…)

    ———————————————————–
    Imports System.Data

    Partial Class GridAnidado
    Inherits System.Web.UI.Page

    Private dts As New DataSet

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then

    LlenarDatos()

    gdvCategorias.DataSource = dts.Tables(“tblCat”).DefaultView
    gdvCategorias.DataBind()

    End If
    End Sub

    Protected Sub gdvCategorias_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gdvCategorias.RowDataBound
    If (e.Row.RowType = DataControlRowType.DataRow) Then
    Dim idCat As String = e.Row.Cells(0).Text
    Dim vst As DataView = New DataView(dts.Tables(“tblPro”), “idCat=” + idCat, String.Empty, DataViewRowState.CurrentRows)
    Dim gdv As GridView = e.Row.Cells(2).FindControl(“gdvProductos”)

    gdv.DataSource = vst
    gdv.DataBind()
    End If
    End Sub

    Protected Sub LlenarDatos()
    Dim tblCat As DataTable = New DataTable(“tblCat”)

    tblCat.Columns.Add(New DataColumn(“idCat”, Type.GetType(“System.String”)))
    tblCat.Columns.Add(New DataColumn(“categoria”, Type.GetType(“System.String”)))

    tblCat.Rows.Add(New Object() {“1″, “Categoria 1″})
    tblCat.Rows.Add(New Object() {“2″, “Categoria 2″})
    tblCat.Rows.Add(New Object() {“3″, “Categoria 3″})
    tblCat.Rows.Add(New Object() {“4″, “Categoria 4″})
    tblCat.Rows.Add(New Object() {“5″, “Categoria 5″})

    dts.Tables.Add(tblCat)

    Dim tblPro As DataTable = New DataTable(“tblPro”)

    tblPro.Columns.Add(New DataColumn(“idPro”, Type.GetType(“System.String”)))
    tblPro.Columns.Add(New DataColumn(“producto”, Type.GetType(“System.String”)))
    tblPro.Columns.Add(New DataColumn(“idCat”, Type.GetType(“System.String”)))

    tblPro.Rows.Add(New Object() {“1″, “Producto 1″, “1″})
    tblPro.Rows.Add(New Object() {“2″, “Producto 2″, “1″})
    tblPro.Rows.Add(New Object() {“3″, “Producto 3″, “2″})
    tblPro.Rows.Add(New Object() {“4″, “Producto 4″, “2″})
    tblPro.Rows.Add(New Object() {“5″, “Producto 5″, “3″})
    tblPro.Rows.Add(New Object() {“6″, “Producto 6″, “4″})
    tblPro.Rows.Add(New Object() {“7″, “Producto 7″, “4″})
    tblPro.Rows.Add(New Object() {“8″, “Producto 8″, “4″})
    tblPro.Rows.Add(New Object() {“9″, “Producto 9″, “5″})
    tblPro.Rows.Add(New Object() {“10″, “Producto 10″, “5″})

    dts.Tables.Add(tblPro)
    End Sub
    End Class

  4. erick
    Martes, 1 de junio de 2010 a las 03:38 | #4

    buenas tardes tengo una duda se que no tiene relacion con esto pero bueno:

    espero y me puedas ayudar desde hace ya rato que mi servidor web se cayo pero egun esto ya quedo pero apartir de alli cuando trato de cargarle algun codigo este no se actualiza al 100% o no se actualiza antes lo hacia con el remot de visual studio directamente al servidor pero desde que se daño el server ya no lo puedo hacer me dice que no tiene las extenciones de front page y ya se las trate de instalar pero nada no me permite espero y me puedan ayudar

  5. Andres Felipe Tabares
    Miércoles, 30 de junio de 2010 a las 13:19 | #5

    Muchas gracias por el aporte, excelente articulo, gratificante encontrar algo tan bueno y en español.

    Saludos desde Medellin-Colombia

  6. Luis
    Miércoles, 8 de septiembre de 2010 a las 13:25 | #6

    Muy buenn aporte… gracias

  7. Lizbeth
    Viernes, 19 de noviembre de 2010 a las 18:00 | #7

    buen dia, yo tengo una pagina con estos elementos, pero dentro del grid anidado tengo una lista con textboxes y dropdowns, pero al hacer los recorridos para cargar los controles, valda y guardar la informacion son muy lentos. existe otro control con el cual pueda hacer esto y mejore mi rendimiento en la pagina.
    Saludos y gracias.

  8. Miércoles, 5 de enero de 2011 a las 06:56 | #8
  9. jesus
    Domingo, 30 de enero de 2011 a las 21:06 | #9

    saludos muy bueno tu ejemplo pero seria posible añadirle mas tablas anidadas(4 niveles) dentro de un solo grid ,(uno dentro de otro) y cargarlo totalmente desde un dropdownlist? espero respuesta…gracias..saludos

  10. Willy Olortegui Arauzo
    Lunes, 14 de febrero de 2011 a las 14:06 | #10

    Se debería recomendar usar paginación, ya que si se carga asi de simple podria generar mucha disminución de perfomance al momento del renderizado.

  11. charly
    Martes, 22 de marzo de 2011 a las 12:45 | #11

    Hola,
    gracias por el ejemplo.

    Una versión 2 con botoncitos para mostrar/ocultar los detalles sería estupendo :)

  12. Raul REtamozo Velarde
    Jueves, 19 de mayo de 2011 a las 16:53 | #12

    Muchas gracias estaba buscando esto ya un tiempo. Habia logrado colocar solo un DropDownList dentro de una grilla, y tambien en un ListView, pero necesito mejorar dicha opcion. Voy a aplicarlo.

  13. Ubaldo Hernandez
    Viernes, 17 de junio de 2011 a las 22:18 | #13

    Gracias por el ejemplo me ayudaste muchisimo

  14. Ubaldo Hernandez
    Lunes, 11 de julio de 2011 a las 17:46 | #14

    No se como obtener los datos del segundo grid, los necesito para generar una consulta a ver si me puedes ayudar.
    Saludos

  15. Jpuga
    Sábado, 29 de octubre de 2011 a las 22:19 | #15

    Hola, muy buena pagina, pero por favoralguien me pudiera ayudar como seria el manejo con mas tablas??? intento hacer con el tercero, pero no me sale. Gracias por la ayuda

  16. alberto
    Martes, 20 de diciembre de 2011 a las 12:01 | #16

    Hola yo tengo un problema con gridview, el caso es que no me da ningun error y ya nose que hacer, he probado mil cosas y nada, a ver si ustedes encuentran el error:

    Imports System.Data.SqlClient
    Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim sqlconnection1 As New SqlConnection

    ctDate.Text = Format(Now, “dd/MM/yyyy”)

    sqlconnection1.ConnectionString = “Server = ADMIN-PC\SQLEXPRESS; uid=sa; pwd=pmrf183; persist security info=False; initial catalog=GroupDB”
    sqlconnection1.Open()
    Session.Timeout = 120

    Dim gridview1 As New GridView
    Dim dataset1 As New DataSet
    Dim comand As New SqlCommand

    comand.Connection = sqlconnection1
    comand.CommandText = “SELECT * FROM vVentaMes311″
    Dim dataadapter1 As New SqlDataAdapter(comand)

    dataadapter1.Fill(dataset1, “vVentaMes311″)
    sqlconnection1.Close()

    gridview1.DataSource = dataset1.Tables(0)

    gridview1.Visible = True

    gridview1.DataBind()

    End Sub

    End Class

  1. Sin trackbacks aún.