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)