Explorando o GridView - Tipos de Colunas

Ao contrário das versões anteriores, o controle GridView nos fornece uma grande quantidade de tipos de colunas, que antes só conseguíamos através da criação manual de uma Template Column. Para que o desenvolvedor perca não tempo na criação destes tipos de colunas a Microsoft já implementou no GridView alguns novos tipos de colunas que usamos com bastante frequencia nas aplicações atuais. As mesmas estão listadas abaixo:

• BoundField
• CheckBoxField
• HyperLinkField
• ImageField
• ButtonField
• CommandField
• TemplateField

Voltando ao DataGrid da versão 1.x do ASP.NET, tínhamos que ir até o Property Builder para definirmos as colunas que queríamos que fossem apresentadas neste controle. Atualmente temos o que chamamos de Smart Tags que nos auxiliam, disponibilizando um acesso rápido e intuitivo às principais propriedades dos controles. É através destas Smart Tags que abrimos a janela para criarmos e editarmos as colunas que queremos em nosso controle GridView. A figura abaixo ilustra isso:

Figura 1 - Definindo as colunas do GridView.

Ao clicar em Edit Columns... na Smart Tag uma nova janela é aberta, e então definiremos as colunas do nosso GridView. Na figura abaixo conseguimos visualizar, envolvidas em um quadrado vermelho, os tipos das colunas mencionadas acima:

Figura 2 - Visualizando e definindo as colunas do GridView.

Dentro desta janela principal temos três importantes seções que configurarão as colunas do GridView. A figura abaixo exibe essas seções e veremos qual a finalidade de cada uma delas:

Figura 3 - Seções da Janela de colunas.

• 1 - Exibe as colunas disponíveis para adicionarmos no GridView.

• 2 - Exibe as colunas que já fazem parte do GridView.

• 3 - As propriedades correspondentes a cada coluna selecionada na seção 2.

Quando já temos um controle do tipo Data Source definido, como é ilustrado na figura 3, já são listados como BoundFields os campos provenientes desta fonte, nos quais podemos também definir como uma coluna do GridView.

Para adicionarmos uma nova coluna ao GridView basta selecionar o tipo da mesma na seção 1 e clicar no botão Add. Assim a mesma aparecerá na seção 2, onde podemos ajustar e definir as propriedades na seção 3 desta janela. Também nesta seção (a número 2), temos a opção de exclusão de uma coluna, clicando no botão X. Finalmente, ainda nesta seção, temos mais dois botões onde definimos a ordem de cada coluna.

Outra opção que chama a atenção é a propriedade Auto-generate fields, que é responsável por gerar automaticamente as colunas do GridView refletindo exatamente os campos do controle Data Source informado. Há também um link chamado Convert this field into a TemplateField, que tem a finalidade de converter qualquer coluna definida no controle GridView em uma Template, que permite ao desenvolvedor manipular manualmente.

Tipos de Colunas

BoundField

Esta coluna simplesmente representa um campo da fonte de dados em uma coluna como um texto (Label) dentro do GridView. É esta a coluna padrão para todos os campos do tipo texto da fonte de dados, em caso de não defirnirmos manualmente.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:BoundField DataField="UsuarioID" HeaderText="UsuarioID" InsertVisible="False" ReadOnly="True" SortExpression="UsuarioID" /> <asp:BoundField DataField="Nome" HeaderText="Nome" SortExpression="Nome" /> <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" /> </Columns> </asp:GridView>

Abaixo é mostrado uma listagem com as principais propriedades da coluna BoundField:

Propriedade Descrição  DataField Define a coluna da fonte de dados que será exibida.  NullDisplayText Define um valor padrão para ser exibido quando o campo da fonte de dados for nulo.

CheckBoxField

Esta coluna é um caso típico onde nas versões 1.x do ASP.NET precisávamos criar uma coluna do tipo TemplateColumn se quiséssemos exibir um valor booleano em formato de um controle CheckBox. Isso foi resolvido com a criação da coluna CheckBoxField, que representa através de um controle CheckBox um valor booleano da fonte de dados.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:CheckBoxField DataField="Ativo" HeaderText="Ativo" SortExpression="Ativo" /> </Columns> </asp:GridView>
ASPX

Abaixo é mostrado uma listagem com as principais propriedades da coluna CheckBoxField:

Propriedade Descrição  DataField Define a coluna booleana da fonte de dados que será exibida no controle CheckBox.  Text Define um valor padrão a ser exibido como "Label" ao controle CheckBox.

HyperLinkField

Apesar desta coluna já existir na versão 1.x do ASP.NET, ela tem uma limitação: só podemos definir um único parâmetro através do Property Builder do controle DataGrid. Se por alguma situação especial precisássemos ter mais de um parâmetro definido na QueryString, tínhamos que recorrer ao código para fazer isso. Essa deficiência foi sanada nesta nova versão, onde agora podemos definir não apenas um campo da fonte de dados, mas sim um Array contendo os nomes dos campos que desejamos anexar à URL.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:HyperLinkField DataNavigateUrlFields="UsuarioID,Ativo" DataNavigateUrlFormatString="?ID={0}&Ativo={1}" DataTextField="Nome" NavigateUrl="Pagina.aspx" /> </Columns> </asp:GridView>

Abaixo é mostrado uma listagem com as principais propriedades da coluna HyperLinkField:

Propriedade Descrição  DataNavigateUrlFields Contém os nomes das colunas que serão anexadas à URL, separadas por vírgula.  DataNavigateUrlFormatString Define a String que especifica os parâmetros e suas posições na QueryString.  DataTextField Define a coluna da fonte de dados que será exibida na propriedade Text do HyperLink.  NavigateUrl Define a página de destino a qual o usuário será redirecionado ao clicar.  Text Define um valor que será exibido na propriedade Text do HyperLink.

ImageField

Como já vimos um pouco acima, este tipo de coluna também exigia a criação de uma coluna do tipo TemplateColumn nas versões anteriores do ASP.NET. A coluna ImageField veio para suprir esta necessidade, possibilitando exibir uma imagem proveniente de uma fonte de dados (seja o caminho/path ou a imagem em si).

Caso você tenha na sua fonte de dados a imagem em si ao invés de um path/caminho para um arquivo físico, você terá que criar um Handler (implementando a Interface IHttpHandler) para exibir a referida Imagem. Como isso foge do escopo deste artigo, fica registrado aqui um artigo do Dino Esposito, onde ele explica como criar e implementar este Handler.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:ImageField DataImageUrlField="Foto" DataImageUrlFormatString="~/Images/{0}"> </asp:ImageField> </Columns> </asp:GridView>

Abaixo é mostrado uma listagem com as principais propriedades da coluna ImageField:

Propriedade Descrição  DataImageUrlField Define a coluna da fonte de dados que contém o Path da foto a ser exibida.  DataImageUrlFormatString Contém a formatação da URL para a imagem a ser exibida.

ButtonField

Este tipo de coluna representa uma coluna da fonte de dados em formato de um Button. É utilizada quando queremos executar uma ação customizada em nosso GridView ou fora dele, no qual podemos identificá-la através da propriedade CommandName que definimos para esta coluna.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:ButtonField DataTextField="Nome" Text="Button" CommandName="Exibir" /> </Columns> </asp:GridView>

Abaixo é mostrado uma listagem com as principais propriedades da coluna ButtonField:

Propriedade Descrição  CommandName Define uma String como uma espécie de "chave" para sabermos que botão foi clicado e, assim, executar uma determinada ação.  DataTextField Define o nome da coluna da fonte de dados que será apresentado na propriedade Text do Button.

CommandField

Representa um conjunto especial de controles que, acrescentado ao GridView, habilita-o para operações de Select, Cancel, Update, Insert e Delete para manipular os dados que foram carregados através da fonte de dados.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" /> </Columns> </asp:GridView>

Abaixo é mostrado uma listagem com as principais propriedades da coluna CommandField:

Propriedade Descrição  ShowCancelButton Exibe ou oculta o Button para cancelar.  ShowDeleteButton Exibe ou oculta o Button para exclusão.  ShowEditButton Exibe ou oculta o Button para edição.  ShowInsertButton Exibe ou oculta o Button para inserção.  ShowSelectButton Exibe ou oculta o Button para seleção.

TemplateField

Caso nenhuma das colunas apresentadas anteriormente satisfaça a necessidade, podemos optar pela criação de uma TemplateField ou TemplateColumn, como também é conhecida. Este tipo de coluna permite customizá-la, incluindo qualquer tipo de formatação ou controle.

O código HTML gerado na página ASPX por este tipo de coluna é exibido abaixo:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="UsuarioID"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:RadioButton ID="RadioButton1" runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

GridView.zip (674.49 kb)