Revista MSDN Magazine Edição 30 - GridView - CheckBox e seleção múltipla estilo WebMail

Este artigo discute sobre a criação de um GridView derivado, como adicionar uma coluna CheckBox ao GridView e a seleção múltipla estilo caixa de entrada do Hotmail.

Clique aqui para ler todos os artigos desta edição

 

GridView – CheckBox e seleção múltipla estilo WebMail

 

Dino Esposito

Este artigo discute

Este artigo usa as seguintes tecnologias

·Criando um GridView derivado;

·Adicionando uma coluna CheckBox ao GridView;

·Seleção múltipla estilo caixa de entrada do Hotmail.

 

ASP.NET 2.0, Visual Studio 2005.

 

Tenho escrito artigos desde janeiro de 1998, e nesses oito anos, acredito que abordei quase todos os assuntos do Windows SDK e do .NET Framework. Em todo esse tempo, um tópico realmente ficou de fora: o DataGrid. Para comemorar mais um artigo, falarei sobre o sucessor do controle DataGrid do ASP.NET: o GridView.

As diferenças do GridView

DataGrid e GridView são controles ricos e sofisticados que disponibilizam grande quantidade de facilidades por si próprios. Além disso, ambos os controles expõem uma infra-estrutura rica e personalizável de propriedades, estilos e templates, e uma boa quantidade de membros que podem ser sobrescritos.

Os controles DataGrid e GridView foram projetados desde o começo, visando a sua estensibilidade. Possuem uma variedade de métodos virtuais protegidos, que os desenvolvedores de controles podem utilizar para projetar e construir componentes ainda mais complexos, específicos para as suas aplicações.

Neste artigo, mostraremos como implementar um GridView derivado, que suporta seleção múltipla. Ao mesmo tempo, veremos os membros internos que foram sobrescritos, os novos membros adicionados, o código script injetado “silenciosamente” na página e algumas das técnicas de gerenciamento de estado.

Acho que será muito mais fácil o entendimento deste artigo, se soubermos aonde quero chegar: o destino final será uma grade como a da caixa de entrada do Hotmail (Figura 1).

 

Figura 1. Grade do Hotmail Inbox

Como podemos ver, a página exibe mensagens de e-mail em uma grade que tem capacidade de classificação e filtragem, além de mostrar os links para as imagens em algumas linhas, o que não é muito difícil de realizar. A coluna CheckBox, entretanto, me fascina cada vez que verifico meus e-mails.

Na grade, a coluna CheckBox permite que os usuários selecionem mensagens múltiplas e executem em todas elas a função que estiver disponível na barra de ferramentas. Os controles DataGrid e GridView suportam a seleção, porém, como é sabido, somente um item de cada vez. Portanto, como faz o Hotmail para permitir a seleção de mensagens múltiplas?

Para termos uma coluna CheckBox em uma grade, não necessitamos de um controle personalizado. No ASP.NET 2.0, adicionamos um CheckBoxField vinculado ao GridView. Se for requerida mais flexibilidade, adicionamos uma coluna template que inclui um CheckBox. Como veremos, o controle CheckBoxField requer a vinculação para um campo de origem dos dados e não exibe o elemento  da interface de usuário caso não esteja vinculado.

A coluna template seria a forma de atingir o nosso objetivo, caso desejássemos usar o CheckBox como um elemento da seleção. Mas nosso objetivo é outro: queremos seleção múltipla. Quando a seleção múltipla for permitida, a grade irá automaticamente adicionar uma coluna CheckBox, cuja posição poderá ser configurada tanto em tempo de projeto quanto em tempo de execução.

Na grade do Hotmail, quando o usuário marca um elemento, a linha inteira é exibida com um estilo diferente. A linha retorna ao seu estilo original quando o elemento é desmarcado. A operação é realizada inteiramente no cliente via script e não requer um postback.

Finalmente, a coluna CheckBox contém um controle no cabeçalho. Quando o elemento do topo for marcado ou desmarcado, todas as linhas na grade serão configuradas apropriadamente. Essa funcionalidade é conseguida também via script e sem recorrer ao servidor.

O novo GridView

O novo controle será chamado GridView, mas pertencerá a um namespace diferente, por exemplo, MsdnMag.CuttingEdge.Controls, como mostrado a seguir:

 

Namespace MsdnMag.CuttingEdge

  Partial Public Class GridView

System.Web.UI.WebControls.GridView

" [...] continue lendo...

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados