|
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
|