Galeria

Utilizando o CheckBox no GridView

Muitas vezes, em nossos projetos, temos uma coleção de dados exibidas em um GridView, seja ela uma lista de produtos, de clientes ou até mesmo pedidos de uma compra. E necessitamos selecionar uma ou todas estas linhas pra efetuar alguma ação: deletar, alterar, somar valores e resgatar ID são exemplos. Um modo fácil de se fazer isso é usar o controle CheckBox no GridView. E é justamente isso que trataremos neste artigo! De uma forma simples e objetiva veremos como selecionar todas as linhas e como resgatar dados de um registro. Então, vamos lá !!

>> Selecionando todos os Registros
Primeiramente, vamos criar nosso banco de dados. Passarei rápido por este tópico, pois esse não é nosso foco. Abra o SQL Server Management Studio, crie um novo banco chamado Artigos_Dev e execute o scriptCriarBanco.txt, conforme a Figura 01 abaixo. Este script vai criar uma tabela chama Clientes e inserir alguns dados para podermos manipula-los. Veja Figura 02.

Figura 01

Figura 02.
Pronto !!! Agora abra o o Visual Studio (estou usando o 2010, mas pode usar o 2005 ou 2008) e crie um novo projeto, clicando em FILE > NEW > PROJECT (Figura 03). Na janela que se abre, escolha a linguagem C# e projeto do tipo WEB. Dê o nome que quiser e depois clique em OK (Figura 4).

Figura 3.

Figura 4.

Após isso, na página Default.aspx, apague tudo que estiver nela e arraste um controle GridView, escolhendo uma formatação do tipo Professional, conforme a Figura 5.

Figura 5.

Agora, o nosso próximo passo é vincular nosso GridView a um banco de dados. Existe várias maneiras de fazer esta ligação, mas como nosso objetivo não é este, vocês podem fazer da maneira que desejarem. Farei viaSqlDataSource que é um controle de acesso a dados, no qual ele já cria por trás todos os métodos necessários para a manipulação destes dados. Para isso, na janela GridView Task, no item Choose Data Source, escolha a opção New data source, conforme a Figura 06.

Figura 06.
Na Janela Data Source Configuration Wizard, escolha a opção DataBase, deixe o nome padrão SqlDataSource1 e clique em OK. Veja a Figura 07.

 

Figura 07.
Após dar OK, na próxima janela que aparece, siga os seguintes passos: 1 – Clique em New Connection… 2 – Coloque o nome da sua máquina. 3 – Escolha o nome do banco, no nosso caso, Artigos_Dev. 4 – Clique em OK. Veja a Figura 08.

 

Figura 08.

Nas próximas duas telas que se segue, clique em NEXT (Figura 09). Após isso, selecione todos os campos da tabela Clientes, clique em NEXT e na próxima janela, clique em FINISH. Veja a Figura 10.

 

Figura 09.

Figura 10.

Pronto !! Já vinculamos nosso GridView a um banco de dados. Vamos agora incluir nosso CheckBox. Pra isso, temos que incluir um TemplateField ao Grid. Na janela GridView Task, clique na opção Edit Columns. Na janela Field que irá aparecer, adicione um TemplateField, coloque-o na primeira posição e depois clique em OK, conforme a Figura 11.

Figura 11.

Após isso, vamos editar este Template, colocando nele nosso controle CheckBox. Então, ainda na janelaGridView Task, clique em Edit Templates. Escolha a opção Header Template e arraste um CheckBox pra dentro dele, deixe o nome padrão CheckBox1. Fazendo isso, estamos adicionando um controle CheckBox no cabeçalho do GridView, que servirá para o usuário clicar nele e todas as linhas serem selecionadas. Então, neste caso, temos que incluir nas linhas também este controle. Então, escolha a opção Item Template, arraste um outro CheckBox para dentro dele e deixe o nome padrão CheckBox2. Veja a figura 12.

Figura 12.

Agora, clique mais uma vez na opção Header Template, e no CheckBox1, clique no botão direito, e emPropriedades, mude para True o atributo AutoPostBack, que por padrão já vem como False. Veja a Figura 13 abaixo.

Figura 13.

Agora, no evento CheckedChanged do CheckBox, iremos colocar nosso código para selecionar todas as linhas. Tudo que fizermos nesse evento, será executado quando o usuário clicar nele, ou seja, marcá-lo. E é justamente isso que queremos fazer. Quando o controle for clicado, todas as linhas serão selecionadas. Bom, então dê um duplo clique no CheckBox1, e você será levado para o evento CheckBox1_CheckedChanged e adicione as seguintes linhas de código (Figura 14):

Figura 14.

Nas linhas de código acima, estou fazendo uma varredura nas linhas do GridView, usando foreach, e procurando se existe um CheckBox nelas, caso exista, mando marcar-las. Volte à página Default.aspx e na janela GridView Task do GridView, clique em End Template Editing. Rode o Aplicativo e veja o resultado, Figura 15.

Figura 15.

>> Resgatando dados de uma Linha

Ok. Podemos também resgatar o ID, Nome, Endereço ou qualquer outros valores necessários para nossas aplicações. E isso podemos fazer usando o CheckBox para selecionar a linha. Aqui no nosso artigo, vamos resgatar todos os dados da nossa tabela Clientes. Pra isso, volte à página Default.aspx e insira uma tabela com 2 colunas e arraste 5 controles Labels e 1 controle Button. Nos Labels, deixe a propriedade Text vazio, e preencha as propriedades ID conforme a Figura 16 abaixo. O mesmo acontece com o Button.

Figura 16.

Após isso, temos que fazer aparecer os dados da linha que tiver clicada. E isso será feito quando o usuário selecionar uma linha através do CheckBox e depois clicar no botão Buscar. Então, colocaremos o código no evento Click do botão. Dê um duplo clique no botão e no evento btnBuscar_Click insira as seguintes linhas de código, Figura 17.

Figura 17

O código acima faz basicamente a mesma coisa que o primeiro. Sendo que neste caso, ele varre todas as linhas e verifica se existe um CheckBox e se ele está checado (clicado). Se sim, ele coloca nos Labels os dados daquela linha.

Pronto, agora rode o sistema e vejamos se deu certo !!

Bom, é isso ai pessoal !! Espero que tenham gostado e um grande abraço a todos.

Até a próxima,

Michaell Dantas

Coisas complexas são criadas a partir de coisas simples.(Michaell Dantas)

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s