Mostrar un GridView dentro de un DataList

    En este articulo vamos a mostrar como enlazar un control GridView, que se encuentra posicionado dentro de un control DataList. 

    La tecnoligia utilizada ha sido ASP.NET 2.0.

    El proyecto se compone únicamente de la página Default.aspx. La página esta formada por dos controles de enlace a datos, el control DataList,(DataList1) y dentro de este un GridView (GridView1).

    Debemos notar que el DataList tiene asignado el evento OnItemCreated. Es en este evento donde vamos a enlazar el GridView.

    La página default.aspx se muestra a continuación (se resaltan en mayor tamaño las partes relevantes de la misma).


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

 

<asp:DataList ID="DataList1" runat="server"

OnItemCreated="DataList1_ItemCreated">

<ItemTemplate>

<asp:Label ID="Label1" runat="server"

Text="<%# Container.DataItem %>"></asp:Label><br />

 

<asp:GridView ID="GridView1" runat="server"

BackColor="White" BorderColor="#E7E7FF"

BorderStyle="None" BorderWidth="1px" CellPadding="3"

GridLines="Horizontal" AutoGenerateColumns="False">

 

<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />

<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />

<SelectedRowStyle BackColor="#738A9C" Font-Bold="True"

ForeColor="#F7F7F7" />

<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C"

HorizontalAlign="Right" />

<HeaderStyle BackColor="#4A3C8C" Font-Bold="True"

ForeColor="#F7F7F7" />

<AlternatingRowStyle BackColor="#F7F7F7" />

 

<Columns>

<asp:TemplateField>

<ItemTemplate>

<asp:TextBox ID="TextBox1" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "c1") %>'>

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:TextBox ID="TextBox2" runat="server"

Text='<%# DataBinder.Eval(Container.DataItem, "c2") %>'>

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</ItemTemplate>

</asp:DataList>

</form>

</body></html>

    El enlace a datos se realiza desde código, llamamos a la función BindData en el Page_Load. En esta función vamos a enlazar el DataList1 a un ArrayList. Dejaremos sin enlazar el GridView de momento.


protected
void Page_Load(object sender, EventArgs e)

{

BindData();

}

void BindData()

{

ArrayList datos = new ArrayList();

datos.Add("Dato1");

datos.Add("Dato2");

DataList1.DataSource = datos;

DataList1.DataBind();

}

    El control GridView lo enlazamos en el evento OnItemCreated del control DataList, este evento se lanza cada vez que se crea un elemento en el DataList.


protected
void DataList1_ItemCreated(object sender,
DataListItemEventArgs e)

{

GridView dg = (GridView)e.Item.FindControl("GridView1");

DataTable dt = new DataTable();

dt.Columns.Add("c1");

dt.Columns.Add("c2");

for (int i = 0; i < 4; i++)

{

DataRow fila = dt.NewRow();

fila[0] = String.Format( "Datos Grid {0}", i);

fila[1] = String.Format("Datos Grid {0} -Campo 2", i);

dt.Rows.Add(fila);

}

dg.DataSource = dt;

dg.DataBind();

}

    El código completo se muestra a continuación.


using
System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections;

 

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

BindData();

}

 

void BindData()

{

ArrayList datos = new ArrayList();

datos.Add("Dato1");

datos.Add("Dato2");

DataList1.DataSource = datos;

DataList1.DataBind();

}

 

protected void DataList1_ItemCreated(object sender,
DataListItemEventArgs e)

{

GridView dg = (GridView)e.Item.FindControl("GridView1");

DataTable dt = new DataTable();

dt.Columns.Add("c1");

dt.Columns.Add("c2");

for (int i = 0; i < 4; i++)

{

DataRow fila = dt.NewRow();

fila[0] = String.Format( "Datos Grid {0}", i);

fila[1] = String.Format("Datos Grid {0} -Campo 2", i);

dt.Rows.Add(fila);

}

dg.DataSource = dt;

dg.DataBind();

}

}

    La ejecución de la página se verá de la siguiente manera:

 

     Saludos, DJK

 

Pedro  Herrarte  Sánchez
Mostrar un GridView dentro de un DataList
Pedro Herrarte Sánchez

Pedro Herrarte, es consultor independiente, ofreciendo servicios de consultoría, análisis, desarrollo y formación. Posee mas de diez años de experiencia trabajando para las principales empresas de España. Es especialista en tecnologías .NET, entornos Web (ASP.NET, ASP.NET MVC,jQuery, HTML5), bases de datos (SQL Server y ORACLE) e integración de sistemas. Es experto en desarrollo (C#, VB.Net, T-SQL, PL/SQL, , ASP, CGI , C, Pro*C, Java, Essbase, Vignette, PowerBuilder y Visual Basic ...) y bases de datos (SQL Server y ORACLE). Pedro es MCP y MAP 2012, es fundador, diseñador y programador de www.devjoker.com..
Fecha de alta:18/04/2008
Última actualizacion:18/04/2008
Visitas totales:18554
Valorar el contenido:
Últimas consultas realizadas en los foros
Últimas preguntas sin contestar en los foros de devjoker.com