DataGrid de ASP.NET con scroll vertical
[Usando distintos valores de la propiedad CSS OverFlow]

Fecha: 28/Oct/2004 (26 de octubre de 2004)
Autor: Emilio P�rez Egido [miliuco] / [email protected]

 


Hace pocos d�as, Haaron Gonz�lez public� en este sitio un art�culo titulado Control personalizado ASP.NET DataGridDesplazable en el que, de una manera muy elegante (muy al estilo .NET), propone la creaci�n de un control personalizado, un DataGrid que no muestra en pantalla todos sus registros sino que presenta una barra de scroll vertical para poder desplazarse a lo largo del DataGrid.
Aprovechando esta publicaci�n y que el DataGrid resultante presenta un comportamiento llam�mosle �no deseado? que es el de perder de vista la cabecera con los t�tulos o nombres de las columnas al efectuar el desplazamiento (scroll vertical), lo que, en DataGrid muy largos o con muchas columnas, puede ser molesto, env�o una profundizaci�n en este tema, teniendo en cuenta que mis propuestas, aunque v�lidas, carecen de la elegancia del ejercicio de Haaron Gonz�lez pues simplemente recurren a ciertas propiedades CSS y del propio objeto DataGrid de ASP.NET.

Fundamentos del art�culo: Si tenemos un DataGrid de ASP .NET que ha de mostrar un n�mero elevado de filas, tenemos la opci�n de paginar el DataGrid. Pero, si no deseamos organizar el DataGrid en m�ltiples p�ginas con un tama�o determinado de registros, podemos recurrir a una propiedad CSS, llamada OverFlow , que indica al navegador c�mo interpretar los elementos cuyo tama�o es mayor que el de su contenedor.
El ejemplo t�pico es el de un contenedor <div>, de un tama�o determinado, que contiene un elemento de un tama�o superior. La propiedad OverFlow le dice al navegador qu� hacer, dependiendo de su valor:

Valor Interpretaci�n por el navegador cliente
visible El contenido no es recortado, puede sobresalir del contenedor
hidden El contenido es recortado, sin barras de scroll para poder ver el resto del contenido
scroll El contenido es recortado, pero el navegador coloca barras de scroll
auto S�lo si el contenido es recortado, el navegador coloca barras de scroll










A continuaci�n se comentan 3 maneras de conseguir un DataGrid con scroll vertical y, al final del documento, se a�ade una URL en la que se propone otra soluci�n para este asunto.

NOTA: En este ejercicio en concreto, el origen de los datos es un archivo XML pero, en cuanto al tema que nos ocupa, es indiferente, ya que el c�digo del DataGrid con scroll es el mismo en todos los casos, ya se trate de una BD de Access o de SQL Server, o un archivo XML como en este caso, etc.


M�todo 1:Para mostrar un DataGrid sin paginar, dentro de un contenedor de una determinada altura, inferior a la del propio DataGrid , el m�todo m�s sencillo es el de encerrar el DataGrid en una etiqueta <div> con los adecuados atributos CSS:

<div style="overflow:auto; width:450px; height:200px; align:left;">
<asp:datagrid id="Rejilla" showheader="True" ... / ... >
... / ...
<columns>
... /...
</columns>

</asp:datagrid>
</div>

Con este c�digo, lo que hacemos es posicionar el DataGrid dentro de un contenedor con anchura suficiente para que no aparezca barra de scroll horizontal (podemos definir la anchura de las columnas del DataGrid en las etiquetas de sus distintos elementos: columns, itemstyle, headerstyle, etc.). Al dar a la propiedad OverFlow el valor auto , como el DataGrid tiene una altura mayor que el contenedor, aparece la barra de scroll vertical. El efecto conseguido es, pues, el de un DataGrid con barra de scroll vertical pero con un inconveniente: al desplazarnos verticalmente por los registros, la cabecera del DataGrid con los nombres de las columnas tambi�n se desplaza y desaparece de la vista, lo que puede resultar molesto si el DataGrid tiene muchas columnas o campos (adem�s, est�ticamente no queda bien):

Imagen del DataGrid antes de hacer
desplazamiento vertical (s� se ven
los nombres de las columnas).

Imagen del DataGrid despu�s de hacer
desplazamiento vertical (no se ven
los nombres de las columnas).


Cabecera desplazable [1 DataGrid]:  

 


M�todo 2: Usamos 2 DataGrid con id�ntico origen de datos.
Uno de ellos est� contenido en una etiqueta <div> cuya altura coincide con la de la cabecera del DataGrid y con el valor hidden de la propiedad OverFlow, con lo que se consigue que, de este primer DataGrid, s�lo se muestre la cabecera con los nombres de las columnas, sin barras de scroll.
El otro DataGrid est� contenido en una segunda etiqueta <div> cuya propiedad OverFlow tiene el valor auto y, como este DataGrid no muestra su cabecera (tiene su propiedad ShowHeader como false), s�lo vemos las filas con los registros y la barra de scroll vertical.
As�, al desplazarnos verticalmente por los registros, nos movemos a lo largo del segundo DataGrid pero el primer DataGrid permanece invariable, por lo que siempre vemos la cabecera con los nombres de las columnas:

<div style="overflow: hidden; height: 20px">
<asp:datagrid id="Cabecera" width="450px" showheader="True" ... / ... >
... / ...
<columns>
... / ...
</columns>

</asp:datagrid>
</div>
<div style="overflow:auto; width:450px; height:200px; align:left;">
<asp:datagrid id="Rejilla" showheader="False" ... / ... >
... / ...
<columns>
... / ...
</columns>

</asp:datagrid>
</div>

Imagen del DataGrid despu�s de hacer
desplazamiento vertical (s� se ven
los nombres de las columnas).


Cabecera fija [2 DataGrid]:  




M�todo 3: Simplificando el m�todo 2, para usar un s�lo DataGrid pero conservando la cabecera siempre a la vista, podemos colocar, antes del contenedor �nico  <div> con la propiedad OverFlow como auto, una etiqueta <asp:label> cuyo contenido se crea por c�digo, trat�ndose de una tabla con una sola fila, cuyas celdas se rellenan con los nombres de las columnas de la tabla del DataSet origen de datos del DataGrid. Usamos la propiedad caption de las columnas de la tabla para obtener su nombre. El DataGrid tiene su propiedad ShowHeader como False pues no se desea mostrar la cabecera ya que su funci�n la realiza esa tabla. El efecto conseguido es similar al del m�todo 2, con un DataGrid por el que nos podemos desplazar verticalmente con su barra de scroll y una cabecera fija con los nombres de las columnas:

<asp:label id="cabecera" runat="server"></asp:label>
<div style="overflow:auto; width:450px; height:200px; align:left;">
<asp:datagrid id="Rejilla" showheader="False" ... / ... >
... / ...
<columns>
... / ...
</columns>

</asp:datagrid>
</div>

Cabecera fija [1 DataGrid]:  




Carlos A. Walzer tiene otra propuesta sobre este asunto en las p�ginas de MSDN (MJT LatinoAm�rica); es similar al segundo m�todo, usando 2 DataGrid diferentes, uno para la cabecera y otro para las filas de registros, pero con un uso m�s avanzado de las propiedades CSS y de HTML din�mico (DHTML) mediante JavaScript, solventando el problema de perder de vista la cabecera al hacer scroll, tanto vertical como horizontal, en el DataGrid :
Scroll completo para la grilla de ASP.NET


ir al ndice

Fichero con el c�digo de ejemplo: miliuco_gridscroll.zip - Tama�o 85 KB