Explorando o GridView – Utilizando Template Columns


A utilização de colunas do tipo Template é freqüentemente utilizada quando as colunas que já existem por padrão no controle GridView não atendem a nossa necessidade. Através delas conseguimos customizar o controle GridView, adicionando um coluna e podendo manipulá-la do jeito desejado para atingir o objetivo.

Podemos formatar, incluir controles, podendo até incluir um outro controle GridView dentro da coluna do tipo TemplateColumn. Para incluir uma TemplateColumn basta adicionar uma nova coluna do tipo TemplateField, conforme é exibido na imagem abaixo:

Figura 1 – Adicionando uma coluna do tipo TemplateField.

Com esta coluna adicionada no controle GridView podemos, através da Smart Tag, editar esta coluna e assim customizar de acordo com a necessidade. O cenário que utilizaremos é incluir em cada linha do controle GridView que contém os registros provenientes de uma DataSource adicionando um controle DropDownList com alguns dos estados do Brasil. Vejamos abaixo o passo à passo para realizar esta tarefa:

Figura 2 – Editando a coluna TemplateField.

 

Figura 3 – Selecionando a seção que queremos customizar.

 

Figura 4 – Adicionando o controle DropDownList.

Quando temos uma coluna do tipo TemplateField no controle GridView, esta por sua vez, tem várias seções, justamente para customizar cada uma delas. A tabela abaixo mostra algumas destas principais seções:

Seção Descrição
HeaderTemplate É a seção do cabeçalho.
ItemTemplate É a seção que define os itens que serão exibidos.
EditItemTemplate É a seção GridView quando este estiver em modo de edição.
FooterTemplate É a seção do rodapé.

Para o cenário do exemplo deste artigo utilizamos a inserção manual de itens dentro do controle DropDownList, mas é importante salientar que é perfeitamente possível a vinculação deste à um objeto de DataSource. O código HTML da página ASPX resultante desta configuração é exibido abaixo:

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField DataField="Nome" HeaderText="Nome" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>SP</asp:ListItem>
                    <asp:ListItem>MT</asp:ListItem>
                    <asp:ListItem>RJ</asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Finalmente, depois dessas configurações efetuadas no controle GridView, o resultado do browser é apresentado abaixo:

Figura 5 – A coluna TemplateField em funcionamento.

A quantidade de colunas Templates que podemos ter no controle GridView é indefinida. Apenas devemos utilizá-las quando nenhuma das colunas existentes por padrão no controle GridView não antender as necessidades. Vale lembrar que no ASP.NET 1.x, algumas das colunas, como por exemplo a ImageField e CheckBoxField, era necessário a utilização de colunas Templates, que hoje já não precisamos mais.

GridView.zip (674.49 kb)

Anúncios

Deixe uma resposta

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