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

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

3 comentarios en “ASP.NET: Añadiendo columnas programáticamente a un control GridView!”

  1. 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.

  2. 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….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *