Fijar el encabezado de un GridView con ASP.Net y CSS

En este articulo vamos a explicar como fijar la columnas en un control GridView de ASP.Net- aunque el método también es perfectamente válido para un DataGrid - de ASP.Net.

Existen mecanismos más o menos complejos, como podemos ver en el siguiente enlace http://www.elguille.info/colabora/puntoNET/miliuco_gridscroll/miliuco_gridscroll1.htm - pero este es tremendamente sencillo - ya que se basa exlusivamente en css.

Lo primero que necesitamos es definir una hoja de estilos, en nuestro caso la hemos llamado devjoker.css.

 

.GridHeader

{

color: white;

position: relative;

top: expression(this.offsetParent.scrollTop - 2);

background-color: #4d7893;

font-weight: bold;

font-size: 12px;

}

.GridRow

{

color: #000000;

background-color: #FFFFFF;

font-weight: normal;

font-size: 10px;

}

.GridAlternateRow

{

color: #000000;

background-color: #FFFFCC;

font-weight: normal;

font-size: 10px;

}

.Marco

{

overflow: auto;

}

.Marco .Grid

{

width: 95%;

}

En nuestra página, añadimos una referencia a la hoja de estilos anterior.

<link href="devjoker.css" rel="stylesheet" type="text/css" />

Ahora colocamos un GridView en la página de la siguiente forma - fijaros especialmente en los estilos que aplicamos al GridView y que este está contenido dentro de una etiqueta div con el atributo class="Marco" - el style es simplemente para posicionar la capa. 

 

<div style="width: 437px; height: 220px; z-index: 1;

left: 180px; top: 15px; position: absolute"

class="Marco">

<asp:GridView ID="GridView1" runat="server"

CssClass="Grid" >

<HeaderStyle CssClass="GridHeader" />

<RowStyle CssClass="GridRow" />

<AlternatingRowStyle CssClass="GridAlternateRow" />

</asp:GridView>

</div>

Con esto ya tenemos todo el trabajo necesario en el lado del aspx. Ahora vamos a enlazar el GridView con un origen de datos. Por sencillez vamos a utilizar una coleccion de objetos, pero podríamos usar cualquier otro origen de datos válido.

Primero definimos una clase para posteriormente crear una colección de ella enlazarla al GridView.

 

public class Devjoker

{

public int Codigo { get; set; }

public string Nombre { get; set; }

public string Apellido { get; set; }

public string FechaNacimiento { get; set; }

public string WebSite { get; set; }

}

Programamos el Page_Load para que genere el origen de datos y enlace el data grid.

 

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

List<Devjoker> datos = GetData();

GridView1.DataSource = datos;

GridView1.DataBind();

}

}

 

protected List<Devjoker> GetData()

{

List<Devjoker> datos = new List<Devjoker>();

for (int i=0;i<100;i++)

{

Devjoker dato = new Devjoker {

Codigo=i,

Nombre="Pedro",

Apellido="Apellido",

FechaNacimiento=

new DateTime(1975,5,13).ToString() ,

WebSite="www.Devjoker.com"};

datos.Add (dato);

}

return datos;

}

El resultado es el siguiente :

La única pega es que solo funciona en Internet Explorer. Así que si alguno de vosotros sabe como hacer lo mismo en FireFox que nos lo cuente!

Seguro que a más de uno (incluido yo mismo) le ha costado algún dolor de cabeza intentar conseguir este efecto tan "sencillo".

Saludos, DJK.

Pedro  Herrarte  Sánchez
Fijar el encabezado de un GridView con ASP.Net y CSS
Pedro Herrarte Sánchez

Pedro Herrarte, es consultor independiente, ofreciendo servicios de consultoría, análisis, desarrollo y formación. Posee mas de diez años de experiencia trabajando para las principales empresas de España. Es especialista en tecnologías .NET, entornos Web (ASP.NET, ASP.NET MVC,jQuery, HTML5), bases de datos (SQL Server y ORACLE) e integración de sistemas. Es experto en desarrollo (C#, VB.Net, T-SQL, PL/SQL, , ASP, CGI , C, Pro*C, Java, Essbase, Vignette, PowerBuilder y Visual Basic ...) y bases de datos (SQL Server y ORACLE). Pedro es MCP y MAP 2012, es fundador, diseñador y programador de www.devjoker.com..
Fecha de alta:04/11/2008
Última actualizacion:04/11/2008
Visitas totales:28429
Valorar el contenido:
Últimas consultas realizadas en los foros
Últimas preguntas sin contestar en los foros de devjoker.com