Tuesday, April 22, 2008

Cómo dar formato a columnas de un GridView

Siguiendo con el tema de los GridViews de ASP.NET ahora vamos a ver como le podemos dar formato a diferentes campos del grid desde el código HTML.
Esto es muy útil cuando queremos traer desde nuestra base de datos números o fechas y queremos que se vean diferentes en nuestra aplicación.
Por ejemplo yo tengo una columna en mi tabla de tipo DATE, sin embargo el Grid agregaba la hora a todas las fechas que desplegaba. De igual manera tengo una columna tipo DECIMAL que necesitaba del símbolo $.
Después de pelearme un buen rato con el GUI para darle formato a mis columnas, descubrí dos cosas importantes:
  • Es más fácil hacer este tipo de modificaciones en el código HTML de la página en la que estamos trabajando.
  • Hay cosas muy escondidas de cada uno de los controles de ASP.NET.
El caso es que para lograr lo que necesitamos tenemos que hacer lo siguiente dentro del archivo ASPX de la página dentro de las declaraciones de columnas:

  • Para columnas tipo DATE: asp:BoundField DataField="Fecha Registro" HeaderText="Fecha Registro" SortExpression="Fecha Registro" dataformatstring="{0:dd/MM/yy}" htmlencode="False".
Con esto logramos que la fecha sólo contenga realmente la fecha sin agregar la hora (la tenga el campo o no). Además la formateamos como dia/mes/año (que es como se usa en Español).
El formato que necesitamos también se puede agregar en el GUI seleccionando "Editar Columnas" y poniendo la expresión regular en el renglón DataFormatString, sin embargo lo que nadie nos dice es que tenemos que ajustar la opción HtmlEncode a "off" para que esto funcione.

  • Para columnas de tipo numérico podemos usar lo siguiente: asp:BoundField DataField="precio" HeaderText="Precio" SortExpression="precio" DataFormatString="{0:$#,#.00}" HtmlEncode="False".
Lo que produce una columna de precio en donde vemos los números con el formato correcto para pesos y centavos.


Estos dos ejemplos utilizan las expresiones regulares para dar formato a los campos. Este tipo de expresiones son muy utilizadas tanto en programación como en otras cosas en donde queremos dar formato a cadenas de caracteres (por ejemplo en Excel). Para los que quieran leer mas al respecto les dejo los siguientes links: Regular Expresion y Regular-Expressions.info

Espero que les sirva!

P.D. recuerden que tengo que eliminar los "< />" de los tags HTML.

Labels: ,

Friday, April 18, 2008

Cómo enlazar los datos de un DataReader a un GridView

Esto puede parecer muy sencillo, pero la verdad es algo oscuro para alguien acostumbrado a utilizar solo el editor WYSIWYG del Visual Studio 2005.
Básicamente el problema es que cuando queremos enlazar dinámicamente un GridView a una datasource generado en tiempo de ejecución (como por ejemplo un DataReader), el control no nos permite asignar columnas y estilos visuales automáticamente.
Lo que tenemos que hacer es entrar al modo codigo HTML de la página ASPX, encontrar los bloques de código en donde se define el GridView y agregar cada uno de los campos de nuestro datasource a cada uno de las columnas del control:

asp:GridView ID="grid2" runat="server" AutoGenerateColumns="False"
Columns
asp:BoundField DataField="Columna_1" HeaderText="Columna 1" SortExpression="Columna 1"
asp:ImageField HeaderText="foto" DataImageUrlField="foto"
asp:ImageField
Columns
asp:GridView

Nota: eliminamos los simbolos para abrir y cerrar etiquetas de ASP (<>) para poder agregar el código.
De esta manera podemos especificar un DataReader como fuente para nuestro control GridView y llenarlo dinamicamente en tiempo de ejecucion igualando cada uno de los campos de la base de datos del DataReader con los DataFields que especificamos.

Labels: , ,