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