Gridview. Diferentes columnas

Como continuación de nuestro primer artículo "GridView. Introducción" que os aconsejamos leer si no lo habéis hecho ya, en este artículos vamos a estudiar los diferentes tipos de columnas que nos podemos encontrar en un gridview.

Hasta el momento, sabemos que con...

    <asp:GridView ID="GridView1" DataSourceID="SqlDataSource1" runat="server" />

... se nos muestra por pantalla todas las columnas que nos devuelve el SqlDataSource1... pero sin ningún tipo de control por nuestra parte... ¿Qué sucede si lo que nos interesa es una de esas columas sean un enlace cuya URL dependa de un dato de la base de datos, y cuyo anchor dependa de otro parámetro de la base de datos?, ¿Y si queremos que una columna sea un checkbox?, ¿Y si queremos que una columa sea una imagen?, ¿O si simplemente queremos que una columna sea lo que nos dé la gana?

Bien, pues el gridview nos ofrece soluciones para prácticamente todos los tipos de columna que queramos. Así pues, iremos una por una para ver sus posibilidades.

Pero antes de comenzar, veamos una previa.

Previa
¿Dónde colocamos los tipos de columnas?
Veamos un ejemplo de código:

    <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:BoundField DataField="Campo1" HeaderText="Encabezado" SortExpression="Campo1" />
            <asp:CheckBoxField DataField="Campo2" HeaderText="EncabezacoCHK" SortExpression="Campo2" />
            <asp:TemplateField HeaderText="Encabezado template field"></asp:TemplateField>
        </Columns>
    </asp:GridView>


Como vemos, dentro del tag <aso:GridView...>...</asp:GridView> colocamos el tag <Columns>...</Columns> y dentro de éste es donde colocamos los diferentes tipos de columnas

¿Y todo esta hay que escribirlo a mano?
No, cualquier programita de la familia del Visual Studio 2005 hace la mayor parte del trabajo. Al final tú sólo vas a hacer algunos clics, pero entendiendo qué significa cada tipo de columna te ahorrarás muchos quebraderos de cabeza incluso para saber dónde hacer esos clics .

BoundField
El BoundField es el tipo de columna básico, al que no hemos más que decirle el nombre del campo que queremos representar y el gridview lo muestra (como resultado de texto) por pantalla.

Veamos un ejemplo:

            <asp:BoundField DataField="
Foro_Titulo" HeaderText="Título del post" SortExpression="Foro_Titulo" />

En el atributo DataField es donde indicamos el nombre del campo que queremos representar. Por ejemplo, si estamos listando los posts de un foro, ese nombre podría ser el correspondiente al campo que contiene los títulos del post (por ejemplo, en mis bases de datos, en la tabla correspondiente al foro, a esa columna la llamo Foro_Titulo).

El atributo HeaderText es donde definimos Cuál va a ser el encabezado de esa columna de nuestro GridView. Siguiendo nuestro ejemplo, a esa columna yo la llamaría "Título del post".

En cuanto al atributo SortExpresion, veremos en próximos artículos a qué se refiere, pero básicamente viene a señalar en base a qué campo vamos a ordenar si queremos ordenar el gridview desde esa columna. Por ejemplo, si quisiéramos ordenar el listado en base a esa columna, el listado nos aparecería ordenador alfabéticamente en base al título del post. También podríamos elegir ordenar según la fecha de inserción del post.

Tengo miedo de no explicar bien este último punto, por lo que enfatizaré que cada columna puede tener su propia SortExpresion, por lo que según qué columna queramos ordenar se usará una SortExpresion u otra.

CheckBoxField
Como os podréis imaginar, el CheckBoxField será una columna en que aparecerá el típico cuadro de selección (CheckBox) con el texto que le indiquemos a la columna. Un ejemplo sería:

    <asp:CheckBoxField DataField="Campo2" HeaderText="EncabezacoCHK" SortExpression="Campo2" />

Donde cada atributo significa lo mismo que con el BoundField, por lo que es el DataField el que indica qué texto acompañará al checkbox

ImageField
Ahora lo que queremos es mostrar una imagen en el listado, y en nuestra base de datos está la información que apunta a esa imagen... pues lo tenemos muy sencillo

    <asp:ImageField DataImageUrlField="datoImagen" DataImageUrlFormatString="~/Imagenes/img-{0}.jpg"
        HeaderText="Encabezado imagen">
    </asp:ImageField>


El DataImageUrlFormatString es el atributo que marca el path donde se encontrará la imagen, quedando a la expectativa de un parámetro. Y ese parámetro se recoge de DataImageUrlField y se sustituye por el {0}. En nuestro ejemplo, las imágenes están en el directorio "~Images" y todas tienen el nombre img-X.jpg, donde X es un número identificativo que guardamos en la base de datos con el nombre de "datoImagen".

Si en nuestra base de datos guardaramos el path completo de la imagen con la extensión incluída, tendríamos algo como:

    <asp:ImageField DataImageUrlField="datoImagen" DataImageUrlFormatString="{0}"
        HeaderText="Encabezado imagen">
    </asp:ImageField>

HyperLinkField
Otro tipo de columna muy utilizado es el HyperLinkField. Con éste, mostraremos al usuario un enlace con un Anchor determinado (proviniente de la BBDD o no) y una url determinada (proviniente de la BBDD o no).

Pongamos dos ejemplo:

1.- <asp:HyperLinkField HeaderText="Encabezado" NavigateUrl="http://www.subgurim.net" Text="ASP.NET 2.0 con C#" />
2.- <asp:HyperLinkField DataNavigateUrlFields="UrlEnlace" DataNavigateUrlFormatString="~/go.aspx?url={0}"
        DataTextField="AnchordelEnlace" DataTextFormatString="Visita {0}" HeaderText="Encabezado" />


En el primer caso, tenemos el extremo de mostrar un enlace con una Url determinada y un texto determinado... y en ningún caso recogemos info proviniente de ninguna base de datos.

En el segundo caso tenemos el otros extremo, en que tanto la url como el anchor utilizan información de la Base de datos.

Anchor
- DataTextFormatString: será el formato del texto que tendrá nuestro Anchor. En nuestro caso será "Visita {0}".
- DataTextField: y ese {0} lo sustituiremos por el dato que haya en el campo "AnchordelEnlace".

Url
- DataNavigateUrlFormatString: formato que tendrá nuestra url. En nuestro caso queremos que cuando el usuario haga clic en el enlace, se visite ~/go.aspx?url={0}.
- DataNavigateUrlFields: y esa {0} será la que esté almacenada en el campo "UrlEnlace".

Los casos 1 y 2 se pueden mezclar a vuestro antojo, y para finiquitar el ejemplo, vamos a mostrar el código de una columna que tendrá un enlace cuyo anchor sea "Ver" y se dirige directamente a la url que está almacenada en nuestra BBDD:

    <asp:HyperLinkField DataNavigateUrlFields="Url" DataNavigateUrlFormatString="{0}"
        Text="Ver" />


TemplateField
El TemplateField es el tipo de columna en el que puedes poner todo lo que quieras, sin nada predeterminado. Por ejemplo, si queremos que en una misma columna aparezcan una imagen dentro de una tabla, con un enlace, un checkbox y un botón.

Con un sencillo ejemplo lo veremos mejor:

    <asp:TemplateField HeaderText="Otra vez el Título del post">
        <ItemTemplate>
            Ejemplo template.
            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Foro_Titulo") %>'></asp:Label>           
        </ItemTemplate>
    </asp:TemplateField>

En este pequeño ejemplo queremos mostrar un texto que nosotros queramos ("Ejemplo template") y luego una Label donde escribiremos (otra vez) el título de nuestro post. Como véis, el método de proceder es el mismo. Fijaos que nuestro código está dentro del <ItemTemplate /> que va dentro del <asp:TemplateField />. En sucesivos artículos veremos porque esto es así.

Pero no nos vayamos por las ramas. Aquí el "truco" está en que recogemos los campos de la BBDD con <%#Eval("Foro_Titulo") %>

ButtonField y CommandField
Estos dos tipos de columnas las explicaremos en el artículo sobre el gridview en que hablemos de cómo editar, borrar y elegir una fila del gridview.


¡Espero que os haya sido útil el artículo!