O controlo
GridView é bastante usado em ASP.NET pois é muito versátil e simples de utilizar.
Existem inúmeras propriedades que permitem com duas ou três alterações tornar esteticamente
muito agradável e funcionalmente muito robusto. Possui ainda alguns poderosos wizards que permitem executar diversas
tarefas, como por exemplo, associar a fontes de dados ou formatar a visualização.
No entanto algumas operações têm de
ser efectuadas através do código para permitir uma manipulação de informação correcta.
Neste exemplo pretende-se mostrar
como adicionar DropDownLists a colunas,
adicionar-lhes informação e verificar os dados seleccionados.
Para começar adiciona-se uma GridView a uma nova página e no canto superior
direito temos um wizard que nos permite realizar algumas tarefas “GridView Tasks”.
Vamos seleccionar “Edit Columns”.
Nesta janela podemos adicionar novas
colunas e modificar as existentes. Para o exemplo vamos adicionar duas colunas BoundField (associadas a um campo) e
duas colunas TemplateField (onde iremos
colocar as DropDownLists). Nas colunas BoundField colocamos a seguinte informação
(figura 1):
Coluna1
HeaderText = "ID"
DataField = "id"
Coluna2
HeaderText = "Nome"
DataField = "nome"
(figura 1)
Para terminar removemos a selecção
“Auto-generate fields” para que a GridView não crie as colunas automaticamente.
De seguida, e ainda no GridView Tasks
seleccionamos “Edit Template”. No menu de Templates seleccionamos o ItemTemplate
de cada coluna (2 e 3) e adicionamos uma DropDownList da Toolbox
(figura 2). Para terminar seleccionamos “End Template Editing".
(figura 2)
Adicionamos um Botão (asp:button)
e podemos ainda escolher a opção “Auto Format” e escolher um formato aleatoriamente a nosso gosto.
No final o código ficará semelhante ao seguinte:
<%@ Page
Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
CellPadding="4"
Font-Names="Arial"
Font-Size="10pt"
ForeColor="#333333"
GridLines="None"
Width="352px">
<Columns>
<asp:BoundField
DataField="id"
HeaderText="ID"
/>
<asp:BoundField DataField="nome" HeaderText="
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList
ID="DropDownList2"
runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList
ID="DropDownList1"
runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle
BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<RowStyle
BackColor="#F7F6F3"
ForeColor="#333333"
/>
<EditRowStyle
BackColor="#999999"
/>
<SelectedRowStyle
BackColor="#E2DED6"
Font-Bold="True"
ForeColor="#333333"
/>
<PagerStyle
BackColor="#284775"
ForeColor="White"
HorizontalAlign="Center"
/>
<HeaderStyle
BackColor="#5D7B9D"
Font-Bold="True"
ForeColor="White"
/>
<AlternatingRowStyle
BackColor="White"
ForeColor="#284775"
/>
</asp:GridView>
<br
/>
<asp:Button ID="Button1"
runat="server"
Text="Verificar"
Height="32px" Width="104px"
/>
<br
/>
</div>
</form>
</body>
</html>
No código VB associado a esta página
vamos colocar informação dinamicamente, podendo ser alterada para uma base de dados.
Para este exemplo vamos utilizar um DataTable
Imports System.Data
Protected
Sub Page_Load(ByVal sender
As Object, ByVal
e As System.EventArgs) Handles
Me.Load
'
Verifica se é a primeira vez que a página é actualizada
' (para não repetir sempre que se actualize)
If
Not Page.IsPostBack Then
Dim strNomes() As
String = {"Jorge Miguel",
"João Alexandre", _
"Paulo Jorge", "Rui Sousa",
"Carlos Andrade"}
' Cria uma nova DataTable e adiciona
duas colunas
Dim
dt As New DataTable
dt.Columns.Add(New DataColumn("id",
GetType(Integer)))
dt.Columns.Add(New DataColumn("nome",
GetType(String)))
' Adiciona as DataRows (linhas)
Dim
dr As DataRow
For x As Byte = 0 To strNomes.Length
- 1
dr = dt.NewRow()
dr.Item("id") = x.ToString
dr.Item("nome") = strNomes(x).ToString
dt.Rows.Add(dr)
Next
' Define a DataTable criada com
DataSource (fonte de dados da Gridview)
Me.GridView1.DataSource
= dt
Me.GridView1.DataBind()
End
If
End Sub
No evento Row Created,
ou seja, sempre que cada linha da GridView é criada irá correr este evento. Neste
evento adicionasse a informação às
DropDownList
Protected
Sub GridView1_RowCreated(ByVal sender
As Object, _
ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
Handles GridView1.RowCreated
'
Verifica se o item criado é do tipo DataRow
' e não outro como Header ou Footer
If
e.Row.RowType = DataControlRowType.DataRow Then
Dim strMeses()
As String = {"", "Janeiro",
"Fevereiro", _
"Março",
"Abril", "Maio",
"Junho", "Julho",
"Agosto", _
"Setembro", "Outubro", "Novembro",
"Dezembro"}
' Procura pela DropDownList
Dim
ctrl1 As DropDownList = e.Row.FindControl("DropDownList1")
' Preenche a DropDownList1 com os meses e selecciona um item em branco
ctrl1.DataSource = strMeses
ctrl1.DataBind()
ctrl1.SelectedIndex = 0
' Preenche a DropDownList2 com os anos
Dim
ctrl2 As DropDownList = e.Row.FindControl("DropDownList2")
ctrl2.Items.Add("")
' Ciclo que irá adicionar os
anos em ordem decrescente
For
x As Int16 = 20 To
0 Step -1
ctrl2.Items.Add(Year(DateTime.Now) - 20 + x)
Next
ctrl2.SelectedIndex = 0
End
If
End Sub
Finalmente um ciclo
executado através do botão de comando que irá mostrar de uma forma simples as selecções efectuadas
Protected
Sub Button1_Click(ByVal sender
As Object, _
ByVal e As
System.EventArgs) Handles Button1.Click
'
Percorre todas as linhas da GridView
For
Each row As GridViewRow
In GridView1.Rows
' Verifica na linha actual qual o mês seleccionado
Dim
ctrl1 As DropDownList = row.FindControl("DropDownList1")
Dim mes As String = ctrl1.SelectedIndex
' Verifica na linha actual qual o ano seleccionado
Dim
ctrl2 As DropDownList = row.FindControl("DropDownList2")
Dim ano As String = ctrl2.SelectedValue
' Mostra a informação no ecra
Response.Write(ano.ToString + " " + mes.ToString + "<br>")
Next
End Sub
(figura 3)
O objectivo deste
exemplo é mostrar como adicionar controlos a uma GridView e como manipula-los. Neste
caso colocamos informação apenas mas poderiamos seleccionar com base em informações
da base de dados ou utilizar outros controlos nas colunas.
PS: Como sempre, qualquer dúvida, comentário ou correcção ao artigo é sempre bem vinda!
1 comentários:
Valeu Jorge Paulino, muito bom mesmo, me resolveu um problemão.
Obrigado
Enviar um comentário