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
Pero se renderiza asi
Se visualiza asi | El HTML que renderiza de esta manera |
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
- Dando formato a las columnas en un GridView (fechas, moneda, etc) (por Sergio Tarrillo)
- Controles GridView que rompen con el nuevo Service Pack 1 para .NET 2.0 y .NET 3.5, y nueva propiedad de campos enlazados (por José M. Alarcón Aguín)
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)
Se visualiza asi | El HTML que renderiza de esta manera |
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í
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:
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.
No entiendo lo de los estilos CSS,puede explicarlo mejor.
Saludos.
Gracias por la aclaración. Lo estaba buscando hace tiempo
A veces pierde uno el tiempo buscando las soluciones en INGLES y se me ocurrio buscarlo en espaniol y me has ayudado bastante!!!
gracias!
saludos