Cómo congelar el encabezado GridView?

Question

Como en un título, ¿alguien sabe cómo congelar el encabezado GridView en ASP.NET?

Answer 1

Opción (a) compre en un paquete de UI que incluya un GridView mejorado con esta funcionalidad incorporada.

Opción (b) haga su propia versión, no es simple. Dino Esposito has one approach.

EDIT: Acabo de darme cuenta de que el artículo de Dino se vincula a un área solo para suscriptores en el sitio de la revista ASPnetPro.

Aquí está another approach utilizando extensores.

Answer 2

Puede hacerlo en el css

Freeze Cabecera: 1. Definir la clase de estilo en .Freezing:

.Freezing 
{ 
    position:relative ; 
    top:expression(this.offsetParent.scrollTop); 
    z-index: 10; 
} 

CssClass

2.Assign cuadrícula de datos de cabecera de la congelación

Answer 3

Dar esto un intento debe resolver el problema http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

Answer 4

Pruebe este proyecto de código abierto para ASP.NET. Extiende GridView para proporcionar un encabezado fijo, pie de página y buscapersonas y un ancho de columna ajustable. Funciona bien en IE 6/7/8, Firefox 3.0/3.5, Chrome y Safari.

http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html

Answer 5

Usted puede probar el siguiente ejemplo de

Freeze GridView Columns

Answer 6

también me enfrentaba a un problema similar durante el desarrollo de las aplicaciones web en Asp.Net 2.0/3.5.

Un buen día, me encontré con IdeaSparks ASP.NET CoolControls. Ayuda a mostrar los encabezados de las columnas fijas, el pie de página y el buscapersonas.

¡Los usé personalmente y realmente me encantó!

To check the control click here : IdeaSparks ASP.NET CoolControls

Espero que esto ayude!

Answer 7

Creo que tengo una solución para esto. por favor ver más abajo el código Javascript

<script type="text/javascript" language="javascript"> 
    var orgTop = 0; 
    $(document).scroll(function() { 
     var id = $("tr:.header").get(0); 
     var offset = $(id).offset(); 
     var elPosition = $(id).position(); 
     var elWidth = $(id).width(); 
     var elHeight = $(id).height(); 
     if (orgTop == 0) { 
      orgTop = elPosition.top; 
     } 
     if ($(window).scrollTop() <= orgTop) { 
      id.style.position = 'relative'; 
      id.style.top = 'auto'; 
      id.style.width = 'auto'; 
      id.style.height = 'auto'; 
     } 
     else { 
      id.style.position = 'absolute'; 
      id.style.top = $(window).scrollTop() + 'px'; 
      id.style.width = elWidth + 'px'; 
      id.style.height = elHeight + 'px'; 

     } 
    }); 
</script> 

donde .header es la clase CSS de su encabezado de la cuadrícula.

Simplemente agregue esta secuencia de comandos en la página y reemplace header con el nombre de la clase css que ha utilizado para su encabezado.