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.