ASP.NET: Fijar la cabecera de un GridView

16 11 2010

Esta semana estuve desarrollando un componente muy interesante para un cliente. El componente consistía en un grid editable de los productos de una oportunidad. En otro artículo mostraré como realice el desarrollo. Por el momento, os describo como resolví un tema, para ese desarrollo, con el cual ya me había topado en alguna otra ocasión. En concreto el problema consiste en como fijar la cabecera de un GridView. Cuando utilizamos el GridView y el número de filas es superior al que se puede visualizar en la ventana, nos muestra el scrollbar vertical pero, al desplazar el scroll hacia abajo, la cabecera nos desaparece como una fila más.

Para resolver este problema, he utilizado un estilo para el tag HeaderItem con las propiedades siguientes:

.DataGridFixedHeader
{
position: relative;
top: expression(this.offsetParent.scrollTop-3); /*this works fine with IE only, but FireFox seems to be ignoring this*/
}

En la definición de los HeaderItem he añadido la clase CSS a través del tag HeaderStyle:

<HeaderStyle CssCalss="DataGridFixedHeader">

Con esta definición, observareis que la fila de cabecera se mantiene fija en la parte superior del grid incluso cuando nos desplazamos hacia las filas inferiores con el scrollbar.

Anuncios

Acciones

Information

11 responses

30 01 2011
perserteewerm

Nice site

26 04 2011
Andres

No me sirvio, tiene algo que ver la version de IE (tengo el 8)

26 04 2011
Albert Pòrrà

Andrés, esta solución la estamos utilizando también en IE 8 por tanto, no creo que sea el problema. Si pudieras darme más detalle del problema que tienes, quizás podria darte alguna solución. Saludos.

24 07 2011
arturo

como estas albert yo estoy buscando esa solicion de fijar el baner para que al usar el scroll lo arrastre pero en html si hay alguna forma de solucionarlo te lo agradeceria.

29 12 2011
Gerardo Ortiz

Hola!!
tuve un problema con la implementacion del CSS

top: expression(this.offsetParent.scrollTop-3);
me indica que esa epresion no es un valor valido para la propiedad TOP
por lo tanto no me toma la linea.

1 01 2012
Albert Pòrrà

Gerardo, podrias concretarme un poco más donde obtienes el error: ¿al editar el CSS en Visual Studio? ¿al mostrar la página? y sobretodo, revisa si hay alguna incompatibilidad del código CSS con tu navegador.

23 03 2012
Victor Soto

Probando…
Cambien

Por

Funciona, pero se ve mal..

o almenos a mi se me ve mal….

23 03 2012
Victor Soto

Cambien CssCalss=”DataGridFixedHeader” por CssClass=”DataGridFixedHeader”

21 06 2012
Crashmetal

Prueben con este código si gustan, esta muy bueno.

URL:
http://msmvps.com/blogs/cwalzer/pages/scrollcompletogrilla.aspx

Saludos._

9 09 2013
Anónimo

como pones el scroll vertical ??

4 03 2014
GIO

NO FUNCIONA POR LA VERSION DE CSS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: