Blog del CIIN

Blog del Centro de Innovación en Integración de Cantabria

This Blog

Syndication

Search

Tags

Community

Email Notifications

Archives

Enlaces Recomendados

ASP.NET: Añadiendo columnas programáticamente a un control GridView!

Recientemente en un proyecto en el que estamos trabajando en el CIIN (por supuesto, es un proyecto de SharePoint ;-)), surgió la necesidad de visualizar una serie de elementos de una lista de SharePoint en una web part...este listado tenía la peculiaridad de que los campos de información podían ser imágenes, links, etc. Entonces, lo primero que tuvimos que decidir es cuál de los elementos de visualización de ASP.NET nos podría resolver la papeleta...tras varias pruebas con distintos controles propios de ASP.NET, optamos por realizar una primera prueba con el control de datos GridView. Ahora bien, no es lo mismo utilizar un control de este tipo cuando desarrollamos una página ASP.NET que cuando desarrollamos una Web Part. En el primero de los casos, tenemos la opción drag & drop que nos da el diseñador de Visual Studio 2008, de manera que:

  • Basta con arrastrar un control de tipo GridView a la superficie de diseño.
  • Acceder a la opción Edit Columns disponible en el smart menú del control para añadir las columnas necesarias.
  • Especificar los campos del GridView y su tipo. Podemos disponer de 7 tipos de campos: BoundField, CheckBoxField, HyperLinkField, ImageField, ButtonField, CommandField y TemplateField.
ASP_NET_Add_Column_Gridview_1 ASP_NET_Add_Column_Gridview_2 ASP_NET_Add_Column_Gridview_3
  • Configuramos las propiedades de los campos añadidos y listo. Ya sólo tenemos que hacer el binding con los datos, y nuestro control GridView mostrará datos...fácil!

ASP_NET_Add_Column_Gridview_4

Pero, ¿Y qué pasa cuando desarrollamos web parts de SharePoint? Pues que no disponemos de ningún tipo de ayuda visual, por lo que no nos queda más remedio que intentar añadir los tipos de campo de las columnas de manera programática...¿es esto posible? Como no podía ser de otra forma, la respuesta es que sí, y tras indagar un poco en la red, llegué a la solución que a continuación os plasmo:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

 

namespace MouroWeb

{

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

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            //Origen de datos

            DataTable dtDatos = new DataTable();

            dtDatos.Columns.Add("Imagen");

            dtDatos.Columns.Add("Url");

 

            DataRow dtRow = dtDatos.NewRow();

            dtRow["Imagen"] = "Imagenes/Logo_CIIN_pq.gif";

            dtRow["Url"] = "CIIN";

            dtDatos.Rows.Add(dtRow);

 

            //Añadiendo columnas al grid

            GridView1.AutoGenerateColumns = false;

            //Columna tipo imagen

            ImageField imfImagen = new ImageField();

            imfImagen.ShowHeader = true;

            imfImagen.HeaderText = "Imagen";

            imfImagen.DataImageUrlField = "Imagen";          

            DataControlField dcfControl = imfImagen;

            GridView1.Columns.Add(dcfControl);

            //Columna tipo Hyperlink

            HyperLinkField hlfLink = new HyperLinkField();

            hlfLink.ShowHeader = true;

            hlfLink.HeaderText = "URL";

            hlfLink.DataTextField="Url";

            hlfLink.NavigateUrl = "http://www.ciin.es";

            dcfControl = hlfLink;

            GridView1.Columns.Add(hlfLink);

 

            //Haciendo el binding...

            GridView1.DataSource = dtDatos;           

            GridView1.DataBind();          

 

        }

    }

}

Como veis, en el código anterior simplemente:

  • Definimos un origen de datos (un objeto de tipo DataTable) con unos datos de prueba.
  • Especificamos que la propiedad AutoGenerateColumns del objeto GridView utilizado esté a false.
  • Definimos objetos del tipo de campo a añadir que necesitemos y los configuramos según nuestras necesidades (y siguiendo la definición de la fuente de datos). En este caso he definido un objeto de tipo ImageField y otro de tipo HyperLinkField.
  • Añadimos las columnas con el tipo de dato al control GridView. Para ello usamos un objeto de tipo DataControlField.
  • Especificamos cuál es la fuente de datos para el control GridView (el objeto DataTable).
  • Hacemos el correspondiente DataBind.

Sin más, probamos la solución y ya está.

 image

Published 18/9/2008 20:04 por Juan Carlos González Martín

Archivado en: ,
Comparte este post:

Comentarios

# re: ASP.NET: Añadiendo columnas programáticamente a un control GridView!@ Friday, September 19, 2008 9:19 AM

En mi blog tienes otra utilidad interesante para el añadir columnas desde el código aun GridView.

Y, en cuanto tenga tiempo, hago una entrada de construcción de un GridView por código, en especial énfasis con huir del formato rejilla.

Juan Quijano

# re: ASP.NET: Añadiendo columnas programáticamente a un control GridView!@ Friday, September 19, 2008 9:33 AM

Buenas Juan,

Gracias por el apunte...me suscribiré a tu blog :-).

Un saludo

JC's

Juan Carlos González Martín

# re: ASP.NET: Añadiendo columnas programáticamente a un control GridView!@ Thursday, March 03, 2011 7:57 PM

como puedo hacer el mismo proceso de agregar links pero leyendo un data set que contiene una consulta determinada e ir llegando el grid.... y que cada link en el grid nuevo mande a diferentes paginas o mande varibles por la url....

packo