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.
Nice site
No me sirvio, tiene algo que ver la version de IE (tengo el 8)
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.
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.
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.
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.
Probando…
Cambien
Por
Funciona, pero se ve mal..
o almenos a mi se me ve mal….
Cambien CssCalss=»DataGridFixedHeader» por CssClass=»DataGridFixedHeader»
Prueben con este código si gustan, esta muy bueno.
URL:
http://msmvps.com/blogs/cwalzer/pages/scrollcompletogrilla.aspx
Saludos._
como pones el scroll vertical ??
NO FUNCIONA POR LA VERSION DE CSS