Desenvolvimento - ASP. NET

Disparando o Evento SelectedIndexChanged do DropDownList dentro do DataGrid

Com a vinda do ASP.NET, muitos recursos foram implementados para garantir a facilidade no desenvolvimento de aplicações Web. Uma das inúmeras facilidades criadas pela Microsoft, foi o WebControl DataGrid...

por Israel Aéce


function DemoOnline() { window.open("http://www.projetando.net/Articles/DemoOnline.aspx?ArticleID=29", "", "width=750, height=580, scrollbars=yes, resizable=yes"); }

Com a vinda do ASP.NET, muitos recursos foram implementados para garantir a facilidade no desenvolvimento de aplicações Web. Uma das inúmeras facilidades criadas pela Microsoft, foi o WebControl DataGrid. Um controle muito rico, que disponibiliza uma série de "features", dentre elas a possibilidade de editarmos registros vindos de uma Base de Dados dentro do DataGrid.

Claro que somente isso não era/é necessário. A necessidade de utilizarmos DropDownList dentro do DataGrid é muito grande, o que exige um pouco de atenção para poder populá-lo. Mas nesse caso a dificuldade não é tão grande. O problema começa a aparecer quando há a necessidade de termos dois DropDownLists dentro deste DataGrid, mas um deles dependendo da seleção do primeiro, e baseado nisso popular este segundo DropDownList. Um cenário bastante conhecido: a exibição dos Clientes dentro deste DataGrid, visualizando a cidade e estado de residência deste Cliente, que ao clicar em editar, deve-se exibir dois DropDownList contendo o Estados e os Municípios que devem ser populados de acordo com o Estado selecionado.

Tendo este cenário, este artigo explicará como construir um DataGrid onde dentro dele, quando editarmos um determinado registro, a linha em edição deverá mostrar os DropDownLists (Estado e Município, respectivamente), onde ao selecionar o Estado, o segundo DropDownList deverá ser populado com as cidades referentes aquele Estado.

Depois de criado uma Aplicação do tipo ASP.NET Web Application, você deve adicionar um DataGrid ao seu WebForm. Com isso, vá até o Property Builder e desmarque a opção: "Create columns automatically at run time". Com isso, basta adicionarmos o campos a serem exibidos no DataGrid e juntamente os botões de Editar e Cancelar. Finalmente você terá o teu DataGrid próximo à Figura 1 (abaixo):

Figura 1 - DataGrid já formatado.

Depois de definido as colunas que serão apresentadas no DataGrid, devemos formatar agora o modo de edição do mesmo. Para isso, clique com botão direito do mouse em cima do DataGrid, e na opção Edit Template, selecione a coluna Estado. Com o Template em edição, você adiciona um DropDownList no EditItemTemplate chamado "cboEstado". Repita os passos anteriores para a coluna Cidade. A Figura 2 (abaixo) ilustra o processo:

Figura 2 - Configurando o EditItemTemplate.

Com o design do DataGrid pronto, resta agora começarmos a codificar o WebForm para popular o DataGrid, mas inicialmente vou chamar a atenção para o código abaixo:

1
2
3
4
5
6
Public Class _Default
    Private _estado As String
    Private _cidade As String
End Class

Código 1 - Membros da Classe.


Como podemos ver, é criado estes dois Data Members que serão utilizados posteriormente para quando o Usuário desejar editar o registro, ficar armazenado nestes membros o Estado e Cidade do registro à ser editado, para que seja possível após a carga nos DropDownLists, posicionar os Items de acordo com a Cidade e Estado atual do Cliente.

O método abaixo (CarregaGrid()) é utilizado para preencher o DataGrid no evento Load do WebForm. Está densvinculado, pois será necessário chamarmos em diversos locais. Vejamos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
Call Me.CarregaGrid()
End If
End Sub
Private Sub CarregaGrid()
Dim conn As New SqlConnection("CONNECTION_STRING")
Dim cmd As New SqlCommand("SELECT * FROM [User] ORDER BY Nome ASC", conn)
Try
conn.Open()
With Me.dg
.DataSource = cmd.ExecuteReader()
.DataBind()
End With
Catch ex As Exception
Response.Write(ex.ToString)
Finally
If Not conn.State = ConnectionState.Closed Then
conn.Close()
End If
End Try
End Sub

Código 2 - Método para carregar o DataGrid.


Como vemos acima, no evento Load do WebForm, chamamos a função CarregaGrid() quando não for um PostBack. Utilizando o SqlDataReader, resgatamos os registros da tabela "Users" e popularmos o DataGrid. Como já definimos as colunas a serem apresentadas, a exibição é controlada pelo DataGrid.

Com o DataGrid já preenchido, devemos codificar os eventos EditCommand e CancelCommand do DataGrid, para que quando o Usuário optar por editar uma determinada linha/registro do DataGrid, puder transformá-la, colocando a disposição os DropDownLists de Estado e Cidade. Abaixo o código para isso:

1
2
3
4
5
6
7
8
Private Sub dg_EditCommand(ByVal source As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dg.EditCommand
Me._cidade = DirectCast(e.Item.FindControl("Label1"), Label).Text
Me._estado = DirectCast(e.Item.FindControl("Label2"), Label).Text
Me.dg.EditItemIndex = e.Item.ItemIndex
Call Me.CarregaGrid()
End Sub

Código 3 - Evento EditCommand do DataGrid.

Vemos que no evento EditCommand, qual ocorre sempre que o Usuário desejar editar algum registro do DataGrid, armazenamos nos nossos Data Members (falado acima) os valores atuais do Estado e da Cidade do Cliente, que estão armazenados nos Labels. Abaixo o evento CancelCommand do DataGrid, necessário para quando o Usuário desejar cancelar a edição o DataGrid voltar à sua posição inicial:

1
2
3
4
5
6
7
Private Sub dg_CancelCommand(ByVal source As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
Handles dg.CancelCommand
Me.dg.EditItemIndex = -1
Call Me.CarregaGrid()
End Sub

Código 4 - Evento CancelCommand do DataGrid.


Depois dessas funcionalidades codificadas, temos que criar os métodos que serão responsáveis por popular os DropDownLists. Veremos abaixo o método CarregaEstado() que retorna um ArrayList contendo os Estados que serão inseridos no DropDownList Estado dentro do DataGrid:

1
2
3
4
5
6
7
8
9
Private Function CarregaEstado() As ArrayList
Dim arr As New ArrayList
With arr
.Add(String.Empty)
.Add("SP")
.Add("MT")
End With
Return arr
End Function

Código 5 - Método para carregar o DropDownList Estado.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Private Sub PopulaCidades(ByVal drop As DropDownList, _
ByVal cidadeAtual As String, ByVal estado As String)
Select Case estado
Case "SP"
With drop.Items
.Add("Valinhos")
.Add("São Paulo")
.Add("Campinas")
End With
Case "MT"
With drop.Items
.Add("Rondonópolis")
.Add("Cuiabá")
.Add("Várzea Grande")
End With
End Select
drop.SelectedIndex = drop.Items.IndexOf(drop.Items.FindByText(cidadeAtual))
End Sub

Código 6 - Método para carregar o DropDownList Cidade.


O método PopulaCidades(...) acima, recebe por parâmetro o DropDownList que será carregado com as cidades, a cidade atual para que possamos selecionar (marcarmos) a mesma dentro do DropDownList depois de carregado e finalmente o estado para poder fazer a busca de acordo com a seleção do Usuário.

Agora será necessário codificarmos dois eventos do DataGrid: ItemDataBound e ItemCreated. O evento ItemCreated é disparado quando um controle é criado no DataGrid. Já o evento ItemDataBound é disparado logo após que um Item é inserido no cliente. Utilizaremos o evento ItemCreated para quando o DataGrid estiver com algum Item sendo editado, o mesmo possa atribuir ao DropDownList de Estado uma função para ser disparada quando ocorrer o evento SelectedIndexChanged do mesmo. Vejamos abaixo como ficará este evento:

1
2
3
4
5
6
7
8
9
10
11
12
Private Sub dg_ItemCreated(ByVal source As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dg.ItemCreated
If e.Item.ItemType = ListItemType.EditItem Then
With DirectCast(e.Item.FindControl("cboEstado"), DropDownList)
.DataSource = .CarregaEstado()
.DataBind()
End With
AddHandler DirectCast(e.Item.FindControl("cboEstado"), DropDownList).SelectedIndexChanged, _
AddressOf Me.CarregaCidade
End If
End Sub

Código 7 - Evento ItemCreated do DataGrid.


Como vemos no evento ItemCreated logo acima, ao encontrar o DropDownList de Estado, já o populamos com o retorno da função CarregaEstado(), e em seguida utilizamos o AddHandler para que quando o evento SelectedIndexChanged deste DropDownList for disparado, executar a função chamada: CarregaCidade(...). Esta função deverá ter obrigatoriamente a mesma assinatura do evento SelectedIndexChanged. Veremos abaixo ela em detalhes:

1
2
3
4
5
6
7
Private Sub CarregaCidade(ByVal sender As Object, ByVal e As EventArgs)
Dim drop As DropDownList = DirectCast(sender, DropDownList)
Dim dgi As DataGridItem = drop.Parent.Parent
Dim drop2 As DropDownList = DirectCast(dgi.FindControl("cboCidade"), DropDownList)
drop2.Items.Clear()
Call Me.PopulaCidades(drop2, drop2.SelectedValue, drop.SelectedValue)
End Sub

Código 8 - Método que será disparado quando o DropDownList Estado for alterado.


Analisando o código acima, criamos três objetos: drop, dgi e drop2. O drop resgata a referência do objeto que como parâmetro através do sender. Já o dgi, recuperamos a referência do controle pai do drop na hierarquia de controles da página. Com isso, conseguimos saber em qual Item do DataGrid ele se encontra. E finalmente, como temos o Item do DataGrid, basta utilizarmos o método FindControl para popularmos o DropDownList com as cidades.

Para finalizar, apenas resta codificarmos o evento ItemDataBound do DataGrid qual utilizaremos para quando o Usuário desejar editar algum Item, os DropDownLists de Estado e Cidade já vieram populados de acordo com registro atual do Cliente na Base de Dados, ou seja, se o Cliente pertencer ao Estado de "SP", o DropDownList de Cidade já deverá conter as cidades pertencentes à este Estado.

Depois de todos estes passos, o resultado será:

Figura 3 - Ao clicar em Editar, os DropDownLists já aparecem carregados corretamente.


Figura 4 - Repare que a Cidade e Estado estão "marcados" de acordo com o Registro atual.


Figura 5 - Ao selecionar o Estado, o DropDownList é carregado de acordo com o Estado selecionado.

CONCLUSÃO: Vemos que o WebControl DataGrid nos fornece uma grande facilidade no desenvolvimento. Neste caso, utilizando DropDownLists e executando seu o evento SelectedIndexChanged precisamos codificar algumas linhas, mas nada complexo. Vimos neste artigo, um cenário bastante comum em nosso "dia-a-dia", ficando aqui explicado como implementá-lo.

Artigo desenvolvido utilizando:

* Visual Studio .NET 2003
* SQL Server 2000
* .NET Framework 1.1
* Windows XP Professional

Clique aqui para fazer Download do Código.

Israel Aéce

Israel Aéce - Especialista em tecnologias de desenvolvimento Microsoft, atua como desenvolvedor de aplicações para o mercado financeiro utilizando a plataforma .NET. Como instrutor Microsoft, leciona sobre o desenvolvimento de aplicações .NET. É palestrante em diversos eventos Microsoft no Brasil e autor de diversos artigos que podem ser lidos a partir de seu site http://www.israelaece.com/. Possui as seguintes credenciais: MVP (Connected System Developer), MCP, MCAD, MCTS (Web, Windows, Distributed, ASP.NET 3.5, ADO.NET 3.5, Windows Forms 3.5 e WCF), MCPD (Web, Windows, Enterprise, ASP.NET 3.5 e Windows 3.5) e MCT.