Combo dentro do GridView

C#.NET

Saturday, February 15, 2014

Views: 5666 SHARE

Caro(a) Leitor(a), hoje eu vou falar e mostrar como adicionar e preencher uma combo (dropdownlist) dentro do componente GridView. O componente GridView é essencial no dia a dia da programação Web com ASP.NET. Ele dispõe de diversos recursos como a edição dos dados sem precisar criar uma nova página pra isso.

O GridView habilita campos para a edição dentro do próprio componente e o grande problema é quando existe no formulário uma combo (dropdownlist) com dados dinâmicos, ou seja, vindos do banco de dados.

Utilizado:

Ferramenta: Visual Studio

Linguagem C#

Plataforma Web ASP.NET

A primeira dúvida é: - como faço para colocar uma combo dentro do componente GridView quando o usuário clicar no botão Edit? É o que será mostrado aqui. Existem pelo menos 3 métodos que precisam ser criados para funcionar.

Veja como ficará o formulário de edição, imagem 1.

Imagem 1 - Editando no GridView

A imagem 1 mostra que depois de clicar no link Edit, os dados se abrem para a edição dentro do próprio GridView. No campo Categoria, existe uma combo (dropdownlist) e no campo Nome uma caixa de texto comum.

Basta o usuário escolher a categoria, alterar o nome e clicar no botão Update. Se o usuário escolhe mudar a categoria, basta clicar na combo. Veja a imagem 1.1.

Imagem 1.1 - Escolhendo outra opção na combo.

A imagem 1.1 mostra exatamente a troca dos dados no campo Categoria. Lembrando que esses dados não são fixos, isto é, eles são buscados diretamente pelo banco de dados.

Os métodos para o GridView

Você precisa criar os métodos necessários para preencher os campos dentro da GridView. Vamos tentar recapitular:

1) Preencha os dados quando o usuário entrar na página usando o Bind();

2) Habilite o componente para mostrar o botão Edit;

3) Utilize o ItemTemplate e o EditItemTemplate para mostrar qualquer componente dentro do GridView;

4) Para o link Cancel funcionar, é necessário criar método específico chamado RowEditing;

5) Para o link Update funcionar, é necessário criar método específico chamado RowUpdating;

6) E para finalizar, para os dados da combo aparecerem no clique do link Edit, é necessário criar o método RowDataBound.

Vamos para o código

O primeiro passo é criar a GridView na página HTML ASPX. A imagem 1.2 mostra essa criação.

Imagem 1.2 - Adicionando o componente GridView

Note que o atributo chamado AutoGenerateEditButton está com o valor True, existem os atributos DataKeyNames com o valor da chave primária, o RowEditing, RowUpdating, RowCancelingEdit e RowDataBound que são atributos do componente.

Cada método criado precisa ser identificado com o nome do componente antes do nome do método. Por isso do gridCategoria_RowCancelingEdit. E isso serve para cada método do componente.

Dentro do código Columns existem os atributos e . Existe ai uma grande diferença entre eles. Um funciona para mostrar ao usuário e o outro ativa quando o usuário clica no botão Edit. Por isso que no existe o dentro. Isso funciona para qualquer componente.

Imagem 1.3 - Método de edição

Quando você clica no link Edit, o GridView busca pelo método e a linha ativa na edição. Basta falar que a edição do Index é uma nova linha. Depois mande preencher o componente com os dados.

Imagem 1.4 - Método de cancelamento.

Note que depois de clicar no link Edit, olink Cancel aparece automaticamente. Quando clicar no link Cancel, a edição tem que parar e ao mesmo tempo voltar os valores antigos. Para isso, basta indicar que a edição é -1 e depois chamar o método para preencher o GridView.

Imagem 1.5 - Adicionando valor na combo depois do edit

Depois que o usuário clica no link Edit, é necessário preencher os dados novamente, inclusive a combo. Para preencher é necessário verificar se a opção editIndex está ativa. Por isso da primeira condição com o If dentro do método RowDataBound.

Depois de verificado, basta buscar o controle pelo nome fazendo um cast do DropDownList. Com o dado pronto, basta fazer uma busca no banco de dados e preencher os dados com o DataBind().

Esse é o segredo para preencher a combo no momento de editar o dado.

Imagem 1.6 - Atualizando dados

Para atualizar os dados informados no GridView, o primeiro passo é pegar o que foi editado e pra isso é necessário encontrar dados através dos índices.

A primeira linha do método RowUpdating pega a linha do grid editada. Com ele, basta procurar o nome do controle dando um cast no tipo de controle, nesse primeiro caso um TextBox. Com o ponto Text (.Text) eu pego o valor digitado pelo usuário.

Como toda combo, o valor mostrado para o usuário é um texto, mas o que guarda dentro do banco é um valor numérico, geralmente. Então eu tive que encontrar o combo pelo nome e depois selecionar o valor para armazenar na variável.

No final, tive que pegar a chave do banco de dados com o DataKey. Com os valores na mão, basta adicionar ao DTO (Data Transfer Object) classe responsável por trafegar os dados até chegar à camada de negócio.

Por isso da classe BRL, que chama o método updateSubCategoria(dto) passando como parâmetro a instância de classe.

Bom, espero que tenha gostado e ajudado. Qualquer dúvida, favor entrar em contato pelo site www.mauriciojunior.org.