ASP.NET / DataGrid – Adicionando rolagem (Scroll)

Para você que utiliza o DataGrid com um grande volume de dados e não quer utilizar a paginação, pode utilizar esse recurso do CSS para ativar a rolagem dos dados na tela, dentro do DataGrid(Scroll).

por Ramon Durães

Para você que utiliza o DataGrid com um grande volume de dados e não quer utilizar a paginação, pode utilizar esse recurso do CSS para ativar a rolagem dos dados na tela, dentro do DataGrid(Scroll).

Para gerar um modelo conforme a figura 01 siga os passos abaixo:

Figura 1 - DataGrid com rolagem

Insira um webform e abra no modo html (aspx), depois adicione o código abaixo:

Este código adiciona uma tabela e o DataGrid.

<!-- Tabela Header --> 
<div> 
<table border="1" cellspacing="0" style="WIDTH:600px;BORDER-COLLAPSE:collapse" 
bgcolor="#336666" BorderColor="#ffffff">
<tr>
<td style="WIDTH:130px">
<font face="Verdana" size="3" color="#ffffff">CustomerID</font>
</td>
<td style="WIDTH: 270px">
<font face="Verdana" size="3" color="#ffffff">ContactName</font>
</td>
<td style="WIDTH:200px">
<font face="Verdana" size="3" color="#ffffff">Phone</font>
</td>
</tr>
</table>
</div>
<!-- Fim tabela --> 

<!-- DataGrid ---> 
<DIV style=" OVERFLOW: auto; WIDTH: 613px; HEIGHT: 168px"> 
<asp:DataGrid id="dgScroll" runat="server" BorderColor="#336666" 
BorderStyle="Double" BorderWidth="3px" BackColor="White" 
CellPadding="4" GridLines="Horizontal" AutoGenerateColumns="False" 
ShowHeader="False"> 

	<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#339966">
	</SelectedItemStyle>
	<ItemStyle ForeColor="#333333" BackColor="White"></ItemStyle>
	<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#336666"></HeaderStyle>
	<FooterStyle ForeColor="#333333" BackColor="White"></FooterStyle> 
	<Columns> 
	    <asp:BoundColumn DataField="CustomerID"> 
	    <ItemStyle Width="130px"></ItemStyle> 
	    </asp:BoundColumn> 
	
	    <asp:BoundColumn DataField="ContactName"> 
	    <ItemStyle Width="270px"></ItemStyle> 
	    </asp:BoundColumn> 
	
		<asp:BoundColumn DataField="Phone">
	    <ItemStyle Width="200px"></ItemStyle>
		</asp:BoundColumn> 
	</Columns> 
	
	<PagerStyle HorizontalAlign="Center" ForeColor="White" BackColor="#336666" 
	Mode="NumericPages"></PagerStyle> 
</asp:DataGrid> 
</DIV> 
<!-- Fim DataGrid --->

Criando procedimento CarregaGrid()

Ajuste a string de acesso ao banco de dados, este exemplo está usando o banco de dados Northwind que vem no pacote do SqlServer.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles 
MyBase.Load
	If Not Me.Page.IsPostBack Then
		Me.CarregarGrid()
	End If
End Sub

"Carregar os dados do banco de dados no DataGrid
Private Sub CarregarGrid()
	Dim conn As New System.Data.sqlclient.SqlConnection("Data Source=127.0.0.1; Initial 
	Catalog=Northwind;UID=sa;Pwd=")
	
	Dim da As New System.Data.sqlclient.SqlDataAdapter("select CustomerID,ContactName,Phone " & _ 
		"from Customers ", conn)
	
	Dim dt As New System.Data.DataTable
	
	Try
		da.Fill(dt)
		With dgScroll
			.DataSource = dt
			.DataBind()
		End With
	Catch ex As System.Data.SqlClient.SqlException
		Response.Write("Erro SQL" + ex.Message.ToString)
	Catch ex As Exception
		Response.Write("Erro Geral:" + ex.Message.ToString)
	Finally
		dt.Dispose()
		da.Dispose()
		conn.Dispose()
	End Try

End Sub

Finalizando

Neste artigo utilizamos do recurso CSS para adicionar rolagem de tela ao componente DataGrid.Para efeitos de aparência eu desabilitei o Header do DataGrid e a geração de colunas automáticas. O segredo da rolagem está no div na linha abaixo:

<DIV style=" OVERFLOW: auto; WIDTH: 613px; HEIGHT: 168px">

O que você gostaria de ver sobre DataGrid ?

Aguardo seu comentário! Participe!!! Até próximo artigo!