ASP.NET  - Fazendo Scroll em um DataGrid


Já precisou fazer um scroll em um datagrid que exibia os dados de uma base de dados por falta de espaço ?

Esta tarefa é relativamente simples e a forma que vamos obter o scroll na verdade não tem nada a ver com código ASP.NET relacionado com a plataforma .NET.

A solução (pelo menos uma das possibilidades) é usar uma tag de formatação usando um atributo de estilo em uma tag <DIV>.

<DIV style="OVERFLOW-Y:scroll; WIDTH:500px; HEIGHT:250px">

Os estilos HEIGHT e WIDTH permitem determinar o tamanho da região de rolagem. Os 500 px e 250 px exibidos acima são os valores que eu vou usar no exemplo da página ASP.NET do artigo.

OVERFLOW-Y:scroll indica ao Navegador para fazer a rolagem vertical.

Para obter este efeito basta colocar o controle datagrid no interior da tag <DIV> .

Para ver isto funcionando eu vou acessar o banco de dados Northwind.mdb e exibir os dados a tabela Customers com uma rolagem vertical.

Vou usar o editor Webmatrix e incluir na guia de Design um controle Table (HTMLControl) e no seu interior um controle DataGrid.

Inicie então o Web Matrix e crie uma nova página ASP.NET com o nome de scrollDataGrid.aspx conforme o layout abaixo:

O código HTML gerado é o seguinte :

<html>
<head>
</head>
<body>
    <img height="32" src="maco10.gif" width="233" border="0" />&nbsp;<font face="Verdana" color="#0000a0" size="4">
<strong>Fazendo  Scroll em um DataGrid</strong></font> 
    <form runat="server">
    </form>
    <div style="OVERFLOW-Y: scroll; WIDTH: 500px; HEIGHT: 250px">
        <table style="WIDTH: 581px; HEIGHT: 259px">
            <tbody>
                <tr>
                    <td>
                        <p title="Scroll em DataGrid" align="center">
                            <asp:DataGrid id="dgClientes" runat="server" Width="551px" Height="254px"></asp:DataGrid>
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>
        <a href="http://www.macoratti.net"><font face="Trebuchet MS" size="2">www.macoratti.net</font></a> 
    </p>
    <p>
    </p>
</body>
</html>

 

Note que o datagrid esta definido no interior da Tag <DIV>.
 

 

 

 

There is a way of accomplishing this that does not have anything at all to do with .NET. It actually has to do with using a style attribute within a <DIV> tag. While this is not a .NET technique, it may prove to be very useful to you in your .NET programming. The tag takes the form:

<DIV style="OVERFLOW-Y:scroll; WIDTH:760px; HEIGHT:570px">

The Width and Height styles allow you to determine the size of the scrollable region. The 760px and 570px shown above are just what I used for the example program. You can make them whatever you need them to be. The OVERFLOW-Y:scroll tells the browser to scroll the div vertically. All you have to do is place a table of objects, or a single object such as a datagrid within the DIV and it will be scrollable. You will be able to see this for yourself if you run the example program available at the bottom of this page, and/or download the sample code.

The example .aspx file (ScrollingGrid.aspx), which demonstrates the technique is shown below.

 

Até mais ....


José Carlos Macoratti