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:

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:

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:

• 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:

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>

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

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:

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:

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:

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:

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)