lunes, 29 de septiembre de 2008

fixed header

Les cuento antes un poco de mi, mi nombre es Marco Alvarez, programador chileno. Esta es mi primera publicación y también es mi primer blog, cree esto, por que como programador en ocasiones busco ejemplos o arreglos a códigos y nunca dan el resultado esperado y por lo general en Ingles :p, intentare dentro de lo posible dejar ideas terminadas y 100% funcionales, en español.

Bueno mi primera publicación tratara sobre un arreglo a un gridview, en ingles fixed header, en español cabecera fija.

los códigos publicados por todas partes tienen un pequeño bug. con el siguiente ejemplo no sucede.
Lo haremos paso a paso

Agregando un Scroll

<div style="OVERFLOW:scroll; width:350px; height:300px; position:relative;">

....

</div>

Con estas lineas agregamos siempre (importante) un scroll.

Cabecera Fija

<asp:GridView>

<HeaderStyle CssClass="DataGridFixedHeader" />

<asp:GridView>
Con estas lineas creamos nuestro gridview y a la cabecera le agregamos el estilo DataGridFixedHeader,

<style type="text/css">

.DataGridFixedHeader {

FONT: menu;

COLOR: black;

background-color: #CCFFCC;

position:relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-3);

}

style>
al agregar este estilo a la cabecera la dejamos fija y relativa al div que hemos agregado mas arriba.
IMPORTANTE este efecto solo es valido para IE5+.

el código completo, seria algo así...

<style type="text/css">

.DataGridFixedHeader {

FONT: menu;

COLOR: black;

background-color: #CCFFCC;

position:relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-3);

}

style>

..................................................

<div style="OVERFLOW:scroll; width:350px; height:300px; position:relative;">

<asp:GridView…

<HeaderStyle CssClass="DataGridFixedHeader" />

asp:GridView>

</div>

Espero esto les sirva para sus desarrollos.
HAIL \m/

1 comentario:

Ruben dijo...

No me sirvio me marca error en la linea del css
expression(parentNode.parentNode.parentNode.parentNode.scrollTop-3);