Gridview: Encabezados a dos líneas. Contenido HTML dentro del header. [HtmlEncode/HtmlEncodeFormatString]

 

Si bien es algo simple, cuando necesitamos que el encabezado de un Gridview soporte contenido HTML, como por ejemplo el tag <br /> de salto de línea debemos hacer un pequeño retoque.
Además viene de la mano para comentar algo unas propiedades que nos ayudan HTMLEncode y HtmlEncodeFormatString(Compatible con: 3.5 SP1, 3.0 SP1, 2.0 SP1)
Esta pregunta es naturalmente repetida en los grupo de noticias de ASP.NET y foros de MSDN así que la posteo para linkear

Lo que naturalmente hacemos…

Insertar código HTML en el texto del encabezado

image

Pero se renderiza asi

Se visualiza asi El HTML que renderiza de esta manera
image image

 

Propiedad HTMLEncode y HtmlEncodeFormatString (nuevo desde el SP1 de NET 2.0)

Esta propiedad HTMLEncode ya nos conocemos si trabajamos mucho con Gridview y formato de personalizado para columnas enlazadas a datos. También la otra propiedad  HtmlEncodeFormatString que seria el fix para que lo que hacíamos en el DataFormatString no dependa de otra propiedad 🙂 O mira estos artículos

HtmlEncodeFormatString es siempre false pero tiene incidencia solo para la propiedad DataFormatString

Debemos indicar que la propiedad HTMLEncode sea false, para que lo renderice tal cual lo escribimos y no lo codifique en el encabezado (si quieres específicamente para el formato del contenido de DataFormatString es con la propiedad HtmlEncodeFormatString)

image
Entonces

Se visualiza asi El HTML que renderiza de esta manera
image image

Con todo esto lograremos un encabezado a dos líneas, que correctamente seria que lograremos que el encabezado del gridview renderice el HTML que escribimos en el.

Es decir… con esto podremos colocar en nuestro encabezado cualquier cosa que se nos ocurra.

 

Que sucede en columnas Template?

Es un poco mas fácil porque tenemos mas “poder” sobre esto.
Simplemente tendríamos que escribir así

image 

 

Con estilos CSS? Esto es la recomendación de mi parte.

 

 

 

 

 

 

 

 

 

La “otra” alternativa es CSS o estilos embebidos como esto (recomendación hacerlo con estilos CSS separados y no embebidos así es mas mantenible)
Es decir tratar de no hacer esto:

image 
En vez de ello asignar una clase CSS (propiedad CSSClass).
Si bien aquí lograremos el mismo resultado a veces no queremos que nuestra columna tome el valor que decimos sino simplemente escribir a dos líneas o contenido HTML. Es decir con estilos lograremos que
Otra idea de estilos tener un contenedor dentro del encabezado de esa celda que ajustemos a nuestro antojo (son ideas simplemente)

 

 

Enlaces

  • HTMLEncode
    Obtiene o establece un valor que indica si los valores de campo se codifican en HTML antes de mostrarlos en un objeto BoundField.
  • HtmlEncodeFormatString
    Obtiene o establece un valor que indica si el texto con formato se debe codificar en HTML cuando se muestra.
    Utilice la propiedad HtmlEncodeFormatString para especificar que el valor de la propiedad DataFormatString se debe codificar en HTML antes de mostrarse.

3 comentarios en “Gridview: Encabezados a dos líneas. Contenido HTML dentro del header. [HtmlEncode/HtmlEncodeFormatString]”

Deja un comentario

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