Disparando o Evento SelectedIndexChanged do DropDownList

by Israel Aece 14. August 2005 16:02

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.

DataGridDropDown.zip (21.17 kb)

Tags:

ASP.NET

Comments are closed

Powered by BlogEngine.NET 1.5.0.0
Theme by Mads Kristensen

Sobre

Meu nome é Israel Aece e sou especialista em tecnologias de desenvolvimento Microsoft, atuando como desenvolvedor de aplicações para o mercado financeiro utilizando a plataforma .NET. [ Mais ]

Twitter

Indicações

Introdução ao ASP.NET Web API - e-Book